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 相关文章推荐
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
jquery实现智能感知连接外网搜索
May 21 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
Jan 06 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
Dec 31 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
JavaScript更改字符串的大小写
May 07 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 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
php 前一天或后一天的日期
2008/06/28 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
python 循环数据赋值实例
2019/12/02 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
Python序列化pickle模块使用详解
2020/03/05 Python
python批量修改xml属性的实现方式
2020/03/05 Python
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
某公司面试题
2012/03/05 面试题
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
中学生操行评语
2014/04/24 职场文书
新教师培训心得体会
2014/09/02 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
高校教师个人总结
2015/02/10 职场文书
债务纠纷起诉书
2015/05/20 职场文书
2019个人工作总结
2019/06/21 职场文书
Python实现照片卡通化
2021/12/06 Python
Android自定义双向滑动控件
2022/04/19 Java/Android