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>
