随笔 - 11  文章 - 2  评论 - 1

图片放大镜效果 

 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>
View Code

 

posted @ 2016-04-05 00:35  Double405  阅读(131)  评论(0)    收藏  举报