jquery中指针不在float层正中间?
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery标签切换效果</title> <link rel="stylesheet" type="text/css"> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <style> *{ margin:0; padding:0; } #demo{ width:1200px; height:600px; margin:0 auto; overflow:hidden; } #small{ width:200px; height:200px; position:relative; z-index:1; overflow:hidden; } #big{ margin-left:300px; position:relative; width:400px; height:400px; display:none; overflow:hidden; } #float{ position:absolute; z-index:10; width:50px; height:50px; background:rgba(250,250,0,0.7); display:none; left:0; top:0; } img{ display:block; position:absolute; } </style> </head> <body> <div id="demo"> <div id="small"> <div id="float"></div> <img src="img/small.jpg" alt="" /> </div> <div id="big"> <img src="img/big.jpg" alt="" /></div> </div> <script type="text/javascript" src="js/jquery-1.12.3.min.js" ></script> <script> $(function(){ var demo=$("#demo"); var small=$("#small"); var float=$("#float"); var big=$("#big"); var img1=$("#small > img:first"); var img2=$("#big > img:first"); img1.on("mouseenter",function(){ float.css("display","block"); big.css("display","block"); }); img1.on("mouseleave",function(){ float.css("display","none"); big.css("display","none"); }); img1.on("mousemove",function(e){ var left=e.clientX-float.width()/2-demo.offset().left-small.offset().left; var top=e.clientY-float.height()/2-demo.offset().top-small.offset().top; if(left<0){ left=0; }else if(left>(small.width()-float.width())){ left=small.width()-float.width(); } if(top<0){ top=0; }else if(top>(small.height()-float.height())){ top=small.height()-float.height(); } float.css({"left":left+"px", "top":top+"px"}); var x=left/(small.width()-float.width()); var y=top/(small.height()-float.height()); var offsetX=x*(big.width()-img2.width())+"px"; var offsetY=y*(big.height()-img2.height())+"px"; img2.css({ "left":offsetX, "top":offsetY }); }); }); </script> </body> </html>
同时,这在chrome和safari下面也会出现闪动