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 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
js实现右键自定义菜单
Dec 03 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 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&amp;java(三)
2006/10/09 PHP
PHP安全技术之 实现php基本安全
2010/09/04 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
python端口扫描系统实现方法
2014/11/19 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
Django之PopUp的具体实现方法
2019/08/31 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
使用npy转image图像并保存的实例
2020/07/01 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
中专生自我鉴定范文
2013/12/19 职场文书
酒鬼酒广告词
2014/03/21 职场文书
日语专业求职信
2014/07/04 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
店长岗位职责
2015/02/11 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers