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

需要注意：

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>

posted @ 2012-12-14 22:41 hdchangchang 阅读(163) 评论(0) 编辑收藏举报

刷新页面返回顶部

青青子衿

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

公告