第一次写博客，JS菜鸟，努力学习中。自己写了一段放大镜特效效果，望前辈多多指点。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>JS放大镜练习</title> 7 <meta name="description" content=""> 8 <meta name="keywords" content=""> 9 <link href="" rel="stylesheet"> 10 <style tyle="text/css"> 11 #demo{width: 400px;height: 255px;border: 1px solid #ccc;position: relative;margin:50px;} 12 #smallbox{position: absolute;z-index: 1;} 13 #floatbox{width:160px;height: 120px;position: absolute;z-index: 1;background:#fff;filter:alpha(opacity=50);opacity: 0.5;cursor: move;display: none;} 14 #bigbox{width: 400px;height: 300px;border: 1px solid #ccc;position: absolute;top:0;left:480px;overflow: hidden;display: none;} 15 #bigbox img{position: absolute;z-index: 5;} 16 #mark{position: absolute;display: block;width: 400px;height: 255px;z-index: 10;cursor: move;background: #fff;filter:alpha(opacity=0);opacity:0;} 17 </style> 18 </head> 19 <body> 20 <div id="demo"> 21 <div id="mark"></div> 22 <div id="smallbox"> 23 <div id="floatbox"></div> 24 <img src="http://www.codefans.net/jscss/demoimg/201102/11_2_2.jpg" alt="" width='400' height='255'> 25 </div> 26 <div id="bigbox"> 27 <img src="http://www.codefans.net/jscss/demoimg/201102/11_2_2.jpg" alt=""> 28 </div> 29 </div> 30 <script type="text/javascript"> 31 var objDemo = document.getElementById("demo"); 32 var objMark = document.getElementById("mark"); 33 var objSmall = document.getElementById("smallbox"); 34 var objFloat = document.getElementById("floatbox"); 35 var objBig = document.getElementById("bigbox"); 36 var bigImg = objBig.getElementsByTagName("img")[0]; 37 objMark.onmouseover=function(){ 38 objFloat.style.display = "block"; 39 objBig.style.display = "block"; 40 } 41 objMark.onmouseout=function(){ 42 objFloat.style.display = "none"; 43 objBig.style.display = "none"; 44 } 45 objMark.onmousemove=function(ev){ 46 var _event = ev || window.event; 47 var left= _event.clientX-objDemo.offsetLeft-objSmall.offsetLeft-objFloat.offsetWidth/2; 48 var top= _event.clientY-objDemo.offsetTop-objSmall.offsetTop-objFloat.offsetHeight/2; 49 if (left<0) { 50 left = 0; 51 } else if(left>(objSmall.offsetWidth-objFloat.offsetWidth)){ 52 left=objSmall.offsetWidth-objFloat.offsetWidth; 53 } 54 if (top<0) { 55 top = 0; 56 } else if(top>(objSmall.offsetHeight-objFloat.offsetHeight)){ 57 top=objSmall.offsetHeight-objFloat.offsetHeight; 58 } 59 objFloat.style.left = left + "px"; 60 objFloat.style.top = top + "px"; 61 62 //大图移动 (不是特别懂) 63 var parentX = left / (objSmall.offsetWidth - objFloat.offsetWidth); 64 var parentY = top / (objSmall.offsetHeight - objFloat.offsetHeight); 65 bigImg.style.left = - parentX * (bigImg.offsetWidth - objBig.offsetWidth) + "px"; 66 bigImg.style.top = - parentY * (bigImg.offsetHeight - objBig.offsetHeight) + "px"; 67 } 68 </script> 69 </body> 70 </html>