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 相关文章推荐
XmlUtils JS操作XML工具类
Oct 01 Javascript
jQuery 打造动态下滑菜单实现说明
Apr 15 Javascript
Jquery Ajax请求代码(2)
Jan 07 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
React Router基础使用
Jan 17 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
深入理解javascript中的this
Feb 08 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 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
cmd下运行php脚本
2008/11/25 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
PHP实现合并discuz用户
2015/08/05 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
Javascript中的变量使用说明
2010/05/18 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
Python中__init__和__new__的区别详解
2014/07/09 Python
Python比较两个图片相似度的方法
2015/03/13 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
美国网上花店:JustFlowers
2017/02/12 全球购物
如何进行有效的自我评价
2013/09/27 职场文书
测控技术与仪器个人求职信范文
2013/12/30 职场文书
廉洁使者实施方案
2014/03/29 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
教师群众路线心得体会
2014/11/04 职场文书
Linux中各个目录的作用与内容
2022/06/28 Servers
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python