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 相关文章推荐
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
js观察者模式的弹幕案例
Nov 23 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输入流php://input介绍
2012/09/18 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
Python urlopen()函数 示例分享
2014/06/12 Python
python列表操作之extend和append的区别实例分析
2015/07/28 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
python生成器与迭代器详解
2019/01/01 Python
Python 元组操作总结
2019/09/18 Python
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
TCP/IP模型的分界线
2012/12/01 面试题
简历中个人求职的自我评价模板
2013/11/29 职场文书
大门门卫岗位职责
2013/11/30 职场文书
花店创业计划书范文
2014/02/07 职场文书
护士个人自我鉴定
2014/03/24 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
清明节寄语2015
2015/03/23 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书