【转】类似淘宝放大镜代码
两种方法实现，第一种js，第二种jquery<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">body{padding:0px;margin:0px;background:#aaaaaa;}#small_pic{margin:10px 0 0 10px;width:375px;height:275px;cursor:crosshair;}#zoom{border:1px solid red;width:120px;height:120px;background:#FFFFFF;position:absolute;top:20px;left:20px;opacity:0.5;filter:alpha(opacity=50);display:none;}#big_pic{width:240px;height:240px;border:1px solid red;position:absolute;top:10px;left:500px;overflow:hidden;display:none;}</style><script type="text/javascript">window.onload = function(){var small_pic = document.getElementById('small_pic');var big_pic = document.getElementById('big_pic');var zoomer = document.getElementById('zoom');var pic2 =document.getElementById('pic2');//移动跟随 small_pic.onmousemove = mouseMove;function mouseMove(ev){ ev = ev || window.event; var l = ev.clientX-small_pic.offsetLeft-zoomer.offsetWidth/2; var h = ev.clientY-small_pic.offsetTop-zoomer.offsetHeight/2; if(l<0){l=0;} else if(l>small_pic.offsetWidth-zoomer.offsetWidth){l=small_pic.offsetWidth-zoomer.offsetWidth+1;} if(h<0){h=0;} else if(h>small_pic.offsetHeight-zoomer.offsetHeight){h=small_pic.offsetHeight-zoomer.offsetHeight+1;} document.getElementById("zoom").style.left = l+small_pic.offsetLeft+"px"; document.getElementById("zoom").style.top = h+small_pic.offsetTop+"px"; var percent = big_pic.clientWidth/zoomer.clientWidth; pic2.style.left = big_pic.style.left-percent*l+'px'; pic2.style.top = big_pic.style.top-percent*h+'px';} small_pic.onmouseover = function(){ zoomer.style.display = 'block'; big_pic.style.display = 'block'; mouseMove();};small_pic.onmouseout = function(){ zoomer.style.display ='none'; big_pic.style.display='none';};};</script></head><body><div id="small_pic"><img id="pic1" src="images/00001.jpg" style="width:375px;height:275px;border:1px solid #aaaaaa;"><span id="zoom"></span></div><div id="big_pic"><img id="pic2" src="images/00001.jpg" style="width:750px;height:550px;position:absolute;"></div></body></html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title></head><style>*{ padding:0px; margin:0px; border:0px;}.all{ margin:0 auto; width:960px; }.big{ float:left; width:160px; height:160px; border:2px solid #CCC; padding:3px; margin-top:100px;}.big .small{ width:50px; height:50px; position:absolute; top:0px; left:300px; background:#CFF; opacity:0.75; display:none;}.big .show{ width:275px; height:150px; padding:3px; position:absolute; top:100px; left:500px; display:none; background:url(images/00001.jpg) no-repeat left top; border:1px solid #666;} </style><script src="jquery-1.7.2.js" type="text/javascript"></script><script>var topset=0; var leftset=0; $(document).ready(function(e) { $(".big").mouseleave(function(){ $(".small").css({"top":LTY,"left":LTX,"display":"none"}); $(".show").css("display","none"); }).mousemove(function(e){ topset=$(this).offset().top; leftset=$(this).offset().left; if(e.pageX<185) LTX=160; else if(e.pageX>301) LTX=276; else LTX=e.pageX-25; if(e.pageY<125) LTY=100; else if(e.pageY>241) LTY=221; else LTY=e.pageY-25; $(".small").css({"top":LTY,"left":LTX,"display":"block"}); position_x="-"+Math.round((LTX-160)/160*550)+"px"; position_y="-"+Math.round((LTY-100)/160*375)+"px"; pl=position_x+" "+position_y; $(".show").css({"display":"block","background-position":pl}); }); });</script><body> <div class="all"> <div class="big"> images/00001.jpg" width="160px;" height="160px <div class="small"></div> <div class="show"></div> </div> </div> </body></html>
页:
[1]