zoukankan      html  css  js  c++  java
  • 图片放大镜效果 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            { 200px; height:200px; margin:10px;}
    .sbox img        { 200px; height:200px; cursor:pointer}
    .bbox            { 400px; height:200px; position:absolute; top:10px; left:300px; overflow:hidden; border:1px solid #333}
    .bbox img        { position:absolute;}
    .dn              { display:none}
    .zzc             { 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            { 200px; height:200px; margin:10px;}  
        .sbox img        { 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>  


  • 相关阅读:
    SGU 176.Flow construction (有上下界的最大流)
    POJ 2391.Ombrophobic Bovines (最大流)
    poj 1087.A Plug for UNIX (最大流)
    poj 1273.PIG (最大流)
    POJ 2112.Optimal Milking (最大流)
    SGU 196.Matrix Multiplication
    SGU 195. New Year Bonus Grant
    关于multicycle path
    ppt做gif动图
    codeforces 598A Tricky Sum
  • 原文地址:https://www.cnblogs.com/hdchangchang/p/3965399.html
Copyright © 2011-2022 走看看