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 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
InnerHtml和InnerText的区别分析
Mar 13 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
vue下的@change事件的实现
Oct 25 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
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
PHP里的中文变量说明
2011/07/23 PHP
php构造函数实例讲解
2013/11/13 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
jquery编写日期选择器
2017/03/16 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
Django Admin实现上传图片校验功能
2016/03/06 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
Python八皇后问题解答过程详解
2019/07/29 Python
Python dict的常用方法示例代码
2020/06/23 Python
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
顶撞领导检讨书
2014/01/29 职场文书
酒店总经理助理岗位职责
2014/02/01 职场文书
村抢险救灾方案
2014/05/09 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
开国大典观后感
2015/06/04 职场文书
横空出世观后感
2015/06/09 职场文书
关爱空巢老人感想
2015/08/11 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android