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 相关文章推荐
Dom 是什么的详细说明
Oct 25 Javascript
高亮显示web页表格行的javascript代码
Nov 19 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
vue实现评价星星功能
Jun 30 Javascript
Element Dialog对话框的使用示例
Jul 26 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中的boolean(布尔)类型详解
2013/10/28 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
js 操作select相关方法函数
2009/12/06 Javascript
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
jquery等待效果示例
2014/05/01 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
python使用win32com库播放mp3文件的方法
2015/05/30 Python
vscode 远程调试python的方法
2017/12/01 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
Python 3.8 新功能全解
2019/07/25 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
解释i节点在文件系统中的作用
2013/11/26 面试题
工作自荐信
2013/12/11 职场文书
便利店促销方案
2014/02/20 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
秋天的图画教学反思
2014/05/01 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
营销与策划专业求职信
2014/06/20 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书