jquery图片放大功能简单实现


Posted in Javascript onAugust 01, 2013
<div class="jqzoom"> 
<img src="http://bfbnews.tw/images/test.jpg" id="bigImg" style="width:500px;height:300px;" jqimg="http://bfbnews.tw/images/test.jpg"> 
</div> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<style type="text/css"> 
body{margin:0px;} 
div.zoomdiv { 
z-index: 999; 
position : absolute; 
top:0px; 
left:0px; 
width : 200px; 
height : 200px; 
background: #ffffff; 
border:1px solid #CCCCCC; 
display:none; 
text-align: center; 
overflow: hidden; 
} 
div.jqZoomPup { 
z-index : 999; 
visibility : hidden; 
position : absolute; 
top:0px; 
left:0px; 
width : 50px; 
height : 50px; 
border: 1px solid #aaa; 
background: #ffffff; 
opacity: 0.5; 
-moz-opacity: 0.5; 
-khtml-opacity: 0.5; 
filter: alpha(Opacity=50); 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$(".jqzoom").jqueryzoom({ 
xzoom: 400, //设置放大 DIV 长度(默认为 200) 
yzoom: 400, //设置放大 DIV 高度(默认为 200) 
offset: 10, //设置放大 DIV 偏移(默认为 10) 
position: "right", //设置放大 DIV 的位置(默认为右边) 
preload:1, 
lens:true 
}); 
}); 
</script> 
<!--{include file="jqzoom_js.html"}-->
Javascript 相关文章推荐
js不是基础的基础
Dec 24 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
vue如何截取字符串
May 06 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
vue的$http的get请求要加上params操作
Nov 12 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 #Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 #Javascript
jquery中选择块并改变属性值的方法
Jul 31 #Javascript
JQuery写动态树示例代码
Jul 31 #Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 #Javascript
JS的千分位算法实现思路
Jul 31 #Javascript
一个JS的日期格式化算法示例
Jul 31 #Javascript
You might like
基于MySQL体系结构的分析
2013/05/02 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
基于ssm框架实现layui分页效果
2019/07/27 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
Python的迭代器和生成器
2015/07/29 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
详解python中*号的用法
2019/10/21 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
HTML5制作表格样式
2016/11/15 HTML / CSS
汉语言文学专业自荐信
2014/06/11 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python