商品放大镜效果

  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 
 27 
 28         #small-box img{
 29             width: 400px;
 30             height: 255px;
 31         }
 32 
 33 
 34 
 35         #float-box {
 36             display: none;
 37             width: 160px;
 38             height: 120px;
 39             position: absolute;
 40             background: #ffffcc;
 41             border: 1px solid #ccc;
 42             filter: alpha(opacity=50);
 43             opacity: 0.5;
 44         }
 45 
 46         #mark {
 47             position: absolute;
 48             display: block;
 49             width: 400px;
 50             height: 255px;
 51             background-color: #fff;
 52             filter: alpha(opacity=0);
 53             opacity: 0;
 54             z-index: 10;
 55         }
 56 
 57         #big-box {
 58             display: none;
 59             position: absolute;
 60             top: 0;
 61             left: 460px;
 62             width: 400px;
 63             height: 300px;
 64             overflow: hidden;
 65             border: 1px solid #ccc;
 66             z-index: 1;;
 67         }
 68 
 69         #big-box img {
 70             position: absolute;
 71             z-index: 5
 72         }
 73     </style>
 74     <script>
 75 
 76         //页面加载完毕后执行
 77         window.onload = function () {
 78 
 79             var objDemo = document.getElementById("demo");
 80             var objSmallBox = document.getElementById("small-box");
 81             var objMark = document.getElementById("mark");
 82             var objFloatBox = document.getElementById("float-box");
 83             var objBigBox = document.getElementById("big-box");
 84             var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];
 85 
 86             objMark.onmouseover = function () {
 87                 objFloatBox.style.display = "block"
 88                 objBigBox.style.display = "block"
 89             }
 90 
 91             objMark.onmouseout = function () {
 92                 objFloatBox.style.display = "none"
 93                 objBigBox.style.display = "none"
 94             }
 95 
 96             objMark.onmousemove = function (ev) {
 97 
 98                 var _event = ev || window.event;  //兼容多个浏览器的event参数模式
 99 
100                 var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
101                 var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;
102 
103                 //设置边界处理，防止移出小图片
104                 if (left < 0) {
105                     left = 0;
106                 } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
107                     left = objMark.offsetWidth - objFloatBox.offsetWidth;
108                 }
109 
110                 if (top < 0) {
111                     top = 0;
112                 } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
113                     top = objMark.offsetHeight - objFloatBox.offsetHeight;
114 
115                 }
116 
117                 objFloatBox.style.left = left + "px";   //oSmall.offsetLeft的值是相对什么而言
118                 objFloatBox.style.top = top + "px";
119                 
120                 //求其比值
121                 var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
122                 var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);
123                 
124                 //方向相反，小图片鼠标移动方向与大图片相反，故而是负值
125                 objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
126                 objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
127             }
128         }
129     </script>
130 </head>
131 <body>
132     <div id="demo">
133         <div id="small-box">
134             <div id="mark"></div>
135             <div id="float-box"></div>
136             <img src="images/ruer-1-4.png"/>
137         </div>
138         <div id="big-box">
139             <img src="images/ruer-1-4.png"/>
140         </div>
141     </div>
142 </body>
143 </html>