您的位置：首页 > Web前端 > JQuery

图片放大镜效果-- jquery实现

2012-12-14 22:41 549 查看

需要注意：

1.大图片和小图片的长宽比应该一致

2.遮罩用的小div 应该和大图片外面的div 的长宽比一致

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style>
*                { padding:0px; margin:0px}
.sbox            { width:200px; height:200px; margin:10px;}
.sbox img        { width:200px; height:200px; cursor:pointer}
.bbox            { width:400px; height:200px; position:absolute; top:10px; left:300px; overflow:hidden; border:1px solid #333}
.bbox img        { position:absolute;}
.dn              { display:none}
.zzc             { width:100px; height:50px;opacity:0.5;filter:alpha(opacity=50);background-color:#999; cursor:pointer}
</style>
<script>
$(function(){
funa()
function funa(){
var nn=4;//大图片是小图片尺寸的倍数，我这里大图是800*800，小图是200*200
var zzc=$(".zzc");    //用于遮罩的div
var bbox=$(".bbox");  //用于存放大图片的div
var sw=zzc.width()/2;
var sh=zzc.height()/2;
var sbox=$(".sbox");  //用于存放小图片的div
sbox.mouseenter(function(){
bbox.show();
zzc.show();
var wid=$(this).width();
var wih=$(this).height();
var sboxl=$(this).offset().left;
var sboxt=$(this).offset().top;

$(document).mousemove(function(e){
var xx=e.pageX;
var yy=e.pageY;
var left=xx-sw;
left=left<sboxl?sboxl:left;
left=left>(wid-sw*2)+sboxl?(wid-sw*2)+sboxl:left;
var top=yy-sh;
top=top<sboxt?sboxt:top;
top=top>(wih-sh*2)+sboxt?(wih-sh*2)+sboxt:top;
zzc.offset({"left":left,"top":top});

bbox.find("img").css({"left":-nn*(left-sboxl),"top":-nn*(top-sboxt)});
if(xx<sboxl||xx>sboxl+wid||yy<sboxt||yy>sboxt+wih){
bbox.hide();
zzc.hide();
$(document).unbind("mousemove")
}

})
})
}

})
</script>

</head>
<body>
<div class="sbox">
<img src="1111.png" />
</div>
<div class="zzc dn"></div>
<div class="bbox dn">
<img src="1111.png" />
</div>
</body>
</html>

下面是封装的一个jquery 插件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style>
*                { padding:0px; margin:0px}
.sbox            { width:200px; height:200px; margin:10px;}
.sbox img        { width:200px; height:200px; cursor:pointer}
.bbox img        { position:absolute;}
.dn              { display:none}
</style>
<script>
(function(){
//放大镜插件，默认放大4倍
$.fn.magnifier=function(iset){
iset = $.extend({
nn:4,         //放大的倍数
zzw:100,
zzh:50,       //遮罩层大小
bimgleft:300,
bimgtop:200   //放大图的位置
},iset||{})

var _self=this;
var thish=$(_self).height();
var thisw=$(_self).width();      //小图片的尺寸大小
var thisl=$(_self).offset().left;
var thist=$(_self).offset().top;

//动态生成遮罩，放大的图片 div
$("<div class='zzc'></div>").appendTo("body")
.css({"width":iset.zzw+"px","height":iset.zzh+"px","opacity":0.5,"cursor":"pointer","background-color":"#999","position":"absolute"})
.hide();
$("<div class='bbox'><img src='' /></div>").appendTo("body")
.css({"width":iset.nn*iset.zzw+"px","height":iset.nn*iset.zzh+"px","overflow":"hidden","border":"1px solid #333","position":"absolute"})
.hide();

$(_self).mouseenter(function(e){
$(document).mousemove(function(e){
var xx=e.pageX,yy=e.pageY;
var zzleft=xx-iset.zzw/2;
var zztop=yy-iset.zzh/2;
var imgsrc=$(_self).find("img").attr("src")

zzleft=zzleft<thisl?thisl:zzleft;
zzleft=zzleft>(thisw+thisl-iset.zzw)?(thisw+thisl-iset.zzw):zzleft;
zztop=zztop<thist?thist:zztop;
zztop=zztop>(thish+thist-iset.zzh)?(thish+thist-iset.zzh):zztop;

if( xx>thisl && xx< (thisl+thisw) && yy>thist && yy<(thist+thish) ){
$(".zzc").show()
.css({"left":zzleft+"px","top":zztop+"px"});
$(".bbox").show()
.css({"left":iset.bimgleft+"px","top":iset.bimgtop})
.find("img").attr("src",imgsrc)
.css({"width":iset.nn*thisw,"height":iset.nn*thish,"position":"absolute","left":-iset.nn*(zzleft-thisl)+"px","top":-iset.nn*(zztop-thist)+"px"})
}else{
$(".zzc").hide();
$(".bbox").hide();
$(document).unbind("mousemove")
}
})
})
return this;
}
})(jQuery)

$(function(){
//插件的引用
$(".sbox").magnifier({nn:5,zzw:120,zzh:50})
})
</script>
</head>
<body>
<div class="sbox">
<img src="study/goodweb/应用中心截屏_2012-11-29T04-13-56.353Z.png"/>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航