1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>图片放大镜效果</title> 6 <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" media="all"/> 7 <link rel="stylesheet" type="text/css" href="../css/bootstrap-theme.min.css" media="all"/> 8 <link rel="stylesheet" type="text/css" href="../css/reset.css" media="all"/> 9 <style type="text/css"> 10 .demo{ width:350px;margin:30px auto; text-align:left; padding:0; } 11 #div{border:1px solid #ccc; position:relative; } 12 #div .small_pic{ width:350px; height:350px; background:#eee; position:relative; } 13 #div .float_layer{ width:100px; height:100px; border:1px solid #000; background:#fff; filter:alpha(opacity:30); opacity:0.3; position:absolute; top:0; left:0; display:none; } 14 #div .mark{ width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0; } 15 #div .big_pic{ position:absolute; top:-1px; left:360px; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; } 16 #div .big_pic img{ position:absolute; top:-30px; left:-80px; } 17 </style> 18 </head> 19 <body> 20 <div id="div" class="demo"> 21 <div class="small_pic"> 22 <span class="mark"></span> 23 <span class="float_layer"></span> 24 <img src="images/small.jpg" alt="放大镜图片一"/> 25 </div> 26 27 <div class="big_pic"> 28 <img src="images/big.jpg" alt="放大镜图片二"/> 29 </div> 30 </div> 31 <script> 32 (function(){ 33 var div = document.getElementById('div'); 34 var small = getByCls(div, 'small_pic')[0]; 35 var big = getByCls(div, 'big_pic')[0]; 36 var img = big.getElementsByTagName('img')[0]; 37 var mark = small.getElementsByTagName('span')[0]; 38 var layer = small.getElementsByTagName('span')[1]; 39 small.onmousemove = function(e){ 40 e = e || event; 41 this.style.cursor = 'move'; 42 layer.style.display = big.style.display = 'block'; 43 var t = e.clientY - div.offsetTop - layer.clientHeight/2; 44 var l = e.clientX - div.offsetLeft - layer.clientWidth/2; 45 if(t < 0){ 46 t = 0; 47 } else if(t > div.clientHeight - layer.clientHeight){ 48 t = div.clientHeight - layer.clientHeight; 49 } 50 if(l < 0){ 51 l = 0; 52 } else if(l > div.clientWidth - layer.clientWidth){ 53 l = div.clientWidth - layer.clientWidth; 54 } 55 var scaleX = l / (div.clientHeight - layer.clientHeight); 56 var scaleY = t / (div.clientWidth - layer.clientWidth); 57 layer.style.top = t + 'px'; 58 layer.style.left = l + 'px'; 59 img.style.left = -scaleX * (img.clientWidth - big.clientWidth) + 'px'; 60 img.style.top = -scaleY * (img.clientHeight - big.clientHeight) + 'px'; 61 } 62 small.onmouseout = function(e){ 63 layer.style.display = big.style.display = 'none'; 64 } 65 function getByCls(obj, cls){ 66 if(obj.getElementsByClassName){ 67 return obj.getElementsByClassName(cls); 68 } else { 69 var res = [], 70 reg = new RegExp('^|\s+' + cls + '\s+|$'), 71 all = obj.all; 72 for(var i = 0; i < all.length; i++){ 73 if(reg.test(all[i].className)){ 74 res.push(all[i]); 75 } 76 } 77 return res; 78 } 79 } 80 }()); 81 </script> 82 </body> 83 </html>