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 用原型继承来实现对象系统
Mar 22 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
node网页分段渲染详解
Sep 05 Javascript
JS打开摄像头并截图上传示例
Feb 18 Javascript
js判断是否是手机页面
Mar 17 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 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 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
PHP正则验证Email的方法
2015/06/15 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
js命名空间写法示例
2015/12/18 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
python实现将元祖转换成数组的方法
2015/05/04 Python
Python数据结构之翻转链表
2017/02/25 Python
python WindowsError的错误代码详解
2017/07/23 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
linux面试题参考答案(2)
2015/12/06 面试题
网管求职信
2014/03/03 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
竞聘上岗演讲
2014/05/19 职场文书
就业协议书怎么填
2014/09/15 职场文书
2015年中个人总结范文
2015/03/10 职场文书
Node实现搜索框进行模糊查询
2021/06/28 Javascript