白叔自創放大鏡教程
阿新 • • 發佈：2018-11-29
<!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="jquery-1.7.js" type="text/javascript"> </script> <style type="text/css"> #xiaokuang{position:absolute; width:100px; height:100px; left:0px; top:0px; background:rgba(254,238,167,.4); display:none; } #datu{ position:absolute; width:400px; height:400px; background-color: #999900; left:400px; top:0px; display:none; overflow: hidden; } </style> <script> $(document).ready(function(){ $("#xiaotu").mouseover( function(){// $("#xiaokuang").css('display','block'); $("#xiaokuang").show(); $("#datu").show();//該方法放到mousemove裡會出錯，不能不停的show } ); $("#xiaotu").mouseout( function(){// $("#xiaokuang").css('display','block'); $("#xiaokuang").hide(); $("#datu").hide();//該方法放到mousemove裡會出錯，不能不停的show } ); $("#xiaotu").mousemove( function(e){ var x=e.clientX-$("#xiaotu").offset().left-$('#xiaokuang').width()/2; var y=e.clientY-$("#xiaotu").offset().top-$('#xiaokuang').height()/2; $("#xiaokuang").css({left:x+'px',top:y+'px'}); if(x<0) $("#xiaokuang").css("left","0px"); if(x>($('#xiaoimg').width()-$('#xiaokuang').width())) $("#xiaokuang").css("left",$('#xiaoimg').width()-$('#xiaokuang').width()+"px"); if(y<0) $("#xiaokuang").css("top","0px"); if(y>($('#xiaoimg').height()-$('#xiaokuang').height())) $("#xiaokuang").css("top",$('#xiaoimg').height()-$('#xiaokuang').height()+"px"); //不能直接用div xiaotu 寬度，它沒有寬度，呼叫數值會和螢幕寬度等寬 var newx=x*2; var newy=y*2; if(newx<0)newx=0; if(newx>($('#datu img').width()-$('#datu').width()))newx=$('#datu img').width()-$('#datu').width(); if(newy<0)newy=0; if(newy>($('#datu img').height()-$('#datu').height()))newy=$('#datu img').height()-$('#datu').height(); $('#datu img').css("margin-left",-newx+'px'); $('#datu img').css("margin-top",-newy+'px'); $("#mydebug").html($('#datu img').width()-$('#datu').width()+" "+"newx"+newx+"newy"+newy+"e.clientX"+e.clientX+"$('#xiaotu').offset().top"+$("#xiaotu").offset().left+"$('#xiaokuang').width()/2"+$('#xiaokuang').width()/2+"$('#xiaotu').width()"+$('#xiaotu').width()); } ); }); //實驗證明，只寫mouseover不寫document ready是不能生效的。 .mouseover括號結尾不寫分號也是不能生效的 </script> </head> <body> <table width="400" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="150"> </td> </tr> </table> <div id="xiaotu" style="position:relative"><img src="s2.jpg" width="400" height="250" id="xiaoimg" /><div id="xiaokuang"></div><div id="datu"><img src="s1.jpg" width="800" height="500" /></div></div> <div id="mydebug" style="height:200px; width:400px;"></div> </body> </html>