打开APP
未登录
开通VIP,畅享免费电子书等14项超值服
开通VIP
首页
好书
留言交流
下载APP
联系客服
jquery放大镜非常漂亮噢
昵称10504424
>《工作》
2013.11.18
关注
这个放大镜的代码挺简单滴效果也不错。
<
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
>
/*
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);
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报
。
打开APP,阅读全文并永久保存
查看更多类似文章
猜你喜欢
类似文章
【热】
打开小程序,算一算2024你的财运
支持ie firefox jQuery遮罩层
jquery 实现导航栏滑动效果
mouseover(),hover(),toggle(),animate(),show(),hide(),toggle()函数的使用
jQuery获取元素位置以及高度与宽度 动态调整打开新窗口效果 - banu的日志 - 网...
一个好用的JQUERY API:slidy
JavaScript专题(二):深入理解iframe
更多类似文章 >>
生活服务
热点新闻
留言交流
回顶部
联系我们
分享
收藏
点击这里,查看已保存的文章
导长图
关注
一键复制
下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!
联系客服
微信登录中...
请勿关闭此页面
先别划走!
送你5元优惠券,购买VIP限时立减!
5
元
优惠券
优惠券还有
10:00
过期
马上使用
×