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 密码强度判断代码
Sep 05 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
Node.js模块封装及使用方法
Mar 06 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
layui原生表单验证的实例
Sep 09 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的十大要点(上)
2009/02/04 PHP
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
详解JS模块导入导出
2017/12/20 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
Windows下PyMongo下载及安装教程
2015/04/27 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
python自动发微信监控报警
2019/09/06 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
python switch 实现多分支选择功能
2020/12/21 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
30年同学聚会感言
2014/01/30 职场文书
优秀毕业生求职信
2014/06/05 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers