商品图片放大镜特效

商品图片放大镜特效 主要是基于鼠标捕获，计算放大镜移动距离原理而制成

 

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>放大镜</title>
  6     <style>
  7                 * {
  8         margin: 0;
  9         padding: 0
 10                 }
 11 
 12                 #demo {
 13         display: block;
 14         width: 400px;
 15         height: 255px;
 16         margin: 50px;
 17         position: relative;
 18         border: 1px solid #ccc;
 19                 }
 20 
 21                 #small-box {
 22         position: relative;
 23         z-index: 1;
 24                 }
 25 
 26                 #float-box {
 27         display: none;
 28         width: 160px;
 29         height: 120px;
 30         position: absolute;
 31         background: #ffffcc;
 32         border: 1px solid #ccc;
 33         filter: alpha(opacity=50);
 34         opacity: 0.5;
 35         cursor: move;
 36                 }
 37 
 38                 #mark {
 39         position: absolute;
 40         display: block;
 41         width: 400px;
 42         height: 255px;
 43         z-index: 10;
 44         background: #fff;
 45         filter: alpha(opacity=0);
 46         opacity: 0;
 47         cursor: move;
 48                 }
 49 
 50                 #big-box {
 51         display: none;
 52         position: absolute;
 53         top: 0;
 54         left: 460px;
 55         width: 400px;
 56         height: 300px;
 57         overflow: hidden;
 58         border: 1px solid #ccc;
 59         z-index: 1;;
 60                 }
 61 
 62                 #big-box img {
 63         position: absolute;
 64         z-index: 5
 65                 }
 66 </style>
 67     <script>
 68 
 69         //页面加载完毕后执行
 70 window.onload = function () {
 71 
 72     var objDemo = document.getElementById("demo");
 73     var objSmallBox = document.getElementById("small-box");
 74     var objMark = document.getElementById("mark");
 75     var objFloatBox = document.getElementById("float-box");
 76     var objBigBox = document.getElementById("big-box");
 77     var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];
 78     
 79     objMark.onmouseover = function () {
 80     objFloatBox.style.display = "block";
 81     objBigBox.style.display = "block";
 82                 }
 83     
 84     objMark.onmouseout = function () {
 85     objFloatBox.style.display = "none";
 86     objBigBox.style.display = "none";
 87                 }
 88     
 89     objMark.onmousemove = function (ev) {
 90     
 91     //请补充此处鼠标移动时的响应方法
 92     
 93         var _clientX = ev.clientX;
 94         var _clientY = ev.clientY;
 95 
 96         //小放大镜移动距离
 97         var _floatX = _clientX - objDemo.offsetLeft - objFloatBox.offsetWidth/2;
 98         var _floatY = _clientY - objDemo.offsetTop - objFloatBox.offsetHeight/2;
 99 
100         //判断是否超出盒子
101         if (_floatX <= 0) {
102             _floatX = 0;
103         };
104         if (_floatX >= (objMark.offsetWidth - objFloatBox.offsetWidth) ) {
105             _floatX = objMark.offsetWidth - objFloatBox.offsetWidth;
106         };
107         if (_floatY <= 0) {
108             _floatY = 0;
109         };
110         if (_floatY >= (objMark.offsetHeight - objFloatBox.offsetHeight) ) {
111             _floatY = objMark.offsetHeight - objFloatBox.offsetHeight;
112         };
113 
114         //小放大镜移动位置
115         objFloatBox.style.left = _floatX+'px';
116         objFloatBox.style.top = _floatY+'px';
117 
118         //大放大镜移动距离
119         var _bigFloatX = ( _floatX*(objBigBoxImage.offsetWidth - objBigBox.offsetWidth) ) / (objMark.offsetWidth - objFloatBox.offsetWidth);
120         var _bigFloatY = ( _floatX*(objBigBoxImage.offsetHeight - objBigBox.offsetHeight) ) / (objMark.offsetHeight - objFloatBox.offsetHeight);
121 
122         //大放大镜移动位置
123         objBigBoxImage.style.left = - _bigFloatX+'px';
124         objBigBoxImage.style.top = - _bigFloatY+'px';
125     }
126 }
127 </script>
128 </head>
129 <body>
130     <div id="demo">
131         <div id="small-box">
132             <div id="mark"></div>
133             <div id="float-box"></div>
134             <img src="http://img.mukewang.com/537d77fb0001559d04000255.jpg"/>
135         </div>
136         <div id="big-box">
137             <img src="http://img.mukewang.com/537d781b0001c04210240654.jpg"/>
138         </div>
139     </div>
140 </body>
141 </html>

 

posted @ 2015-05-02 18:57  人间最美二月天  阅读(221)  评论(0)  编辑  收藏  举报