jquery放大镜效果超漂亮噢


Posted in Javascript onNovember 15, 2013

这个放大镜的代码挺简单滴效果也不错。

<script> 
//QQ:496928838 微凉 
$(function(){ 
$("#demo").enlarge( 
{ 
// 鼠标遮罩层样式 
shadecolor: "#FFD24D", 
shadeborder: "#FF8000", 
shadeopacity: 0.4, 
cursor: "move", // 大图外层样式 
layerwidth: 480, 
layerheight: 360, 
layerborder: "#DDD", 
fade: true, 
// 大图尺寸 
largewidth: 960, 
largeheight: 720 
}); 
}); 
</script> 
<a href="demo.jpg" id="demo" style="position: relative;float: left;"> 
<img src="demosmall.jpg" width="240" height="180"> 
<img src="demo.jpg" width="960" height="720" style="display: none;"> 
</a>

jquery放大镜效果超漂亮噢 
jquery放大镜效果超漂亮噢
/* 
Enlarge for jQuery v1.0 
Abel Yao, 2013 
*/ 
(function(e){var i={shadecolor:"#FFD24D",shadeborder:"#FF8000",shadeopacity:.5,cursor:"move",layerwidth:400,layerheight:300,layerborder:"#DDD",fade:true,largewidth:1280,largeheight:960};var t=function(t){t=e.extend({},i,t);e(this).each(function(){var i=e(this).css("position","relative");var h=i.children().first();var r={x:h.width()/t.largewidth,y:h.height()/t.largeheight};var o={shade:{width:t.layerwidth*r.x-2,height:t.layerheight*r.y-2}};var a=e("<div>").css({position:"absolute",left:"0px",top:"0px","background-color":t.shadecolor,border:"1px solid "+t.shadeborder,width:o.shade.width,height:o.shade.height,opacity:t.shadeopacity,cursor:t.cursor});a.hide().appendTo(i);var d=e("<img>").css({position:"absolute",display:"block",width:t.largewidth,height:t.largeheight});var s=e("<div>").css({position:"absolute",left:i.width()+5,top:0,"background-color":"#111",overflow:"hidden",width:t.layerwidth,height:t.layerheight,border:"1px solid "+t.layerborder});d.attr("src",i.attr("href"));d.appendTo(s);s.hide().appendTo(i);var n={x:o.shade.width/2,y:o.shade.height/2};var l={width:i.innerWidth()-a.outerWidth(),height:i.innerHeight()-a.outerHeight()};var g=function(){a.show();if(t.fade)s.stop().fadeIn(300);else s.show()};var c=function(){a.hide();s.hide()};var f=i.offset();i.mousemove(function(e){var t=e.pageX-f.left;var h=e.pageY-f.top;if(t<0||t>i.innerWidth())return c();if(h<0||h>i.innerHeight())return c();t=t-n.x;h=h-n.y;if(t<0)t=0;if(h<0)h=0;if(t>l.width)t=l.width;if(h>l.height)h=l.height;a.css({left:t,top:h});d.css({left:0-t/r.x,top:0-h/r.y})}).mouseenter(g).mouseleave(c)})};e.fn.extend({enlarge:t})})(jQuery);

下载地址:http://pan.baidu.com/s/1zilrC
Javascript 相关文章推荐
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
js全选按钮的实现方法
Nov 17 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 #Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 #Javascript
js截取小数点后几位的写法
Nov 14 #Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 #Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 #Javascript
JQuery实现倒计时按钮具体方法
Nov 14 #Javascript
jquery动态增加删除表格行的小例子
Nov 14 #Javascript
You might like
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
PHP 压缩文件夹的类代码
2009/11/05 PHP
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
jQuery 操作XML入门
2008/12/25 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
python实现内存监控系统
2021/03/07 Python
python 求10个数的平均数实例
2019/12/16 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
装潢设计专业推荐信模板
2013/11/26 职场文书
安全大检查反思材料
2014/01/31 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
高考学习决心书
2015/02/04 职场文书
MySQL系列之六 用户与授权
2021/07/02 MySQL