html 放大镜效果

来源：互联网发布：淘宝以前的聊天记录编辑：程序博客网时间：2024/06/10 04:22

还是用到html还有css，写的非常简单，很容易懂，就不多废话了

代码如下：

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           #smallbox {
               border: 1px solid #000000;
               width: 450px;
               height: 450px;
               position: absolute;
               cursor: pointer;
               z-index: 5;
           }

           #movebox {
               display: none;
               position: absolute;
               left: 0;
               top: 0;
               opacity: 0.5;
               width: 303.75px;
               height: 303.75px;
               background: yellow;
               z-index: 100;
           }

           #smallimg1 {
               height: 450px;
               width: 450px;
           }

           #bigimg {
               position: absolute;
               left: 0px;
               top: 0px;
           }

           #what {
               display: none;
               height: 540px;
               width: 540px;
               overflow: hidden;
               position: absolute;
               left: 500px;
               top: 0px;
           }
       </style>
       <script>
           var _left;
           var _top;
           var myscale;
           window.onload = function() {
               //               myscale=document.getElementById("smallbox").clientWidth/document.getElementById("movebox").clientWidth;
               myscale = 1.76;
               document.getElementById("smallbox").addEventListener("mousemove", function(evt) {
                   //先设置快元素的display
                   document.getElementById("movebox").style.display = "block";
                   document.getElementById("what").style.display = "block";

                   var evnt = evt || event;
                   _left = evnt.clientX - document.getElementById("smallbox").offsetLeft - (document.getElementById("movebox").clientWidth) / 2;
                   _top = evnt.clientY - document.getElementById("smallbox").offsetTop - (document.getElementById("movebox").clientHeight) / 2;
                   if(_left < 0) {
                       _left = 0;
                   }
                   if(_left > 147) {
                       _left = 147;
                   }
                   if(_top < 0) {
                       _top = 0;
                   }
                   if(_top > 147) {
                       _top = 147;
                   }
                   movediv(_left, _top, myscale);
                   console.log(myscale);
               });
               document.getElementById("smallbox").addEventListener("mouseout", function() {
                   document.getElementById("movebox").style.display = "none";
                   document.getElementById("what").style.display = "none";
               });
           }

           function movediv(divleft, divtop, myscale) {
               document.getElementById("movebox").style.left = divleft + "px";
               document.getElementById("movebox").style.top = divtop + "px";
               document.getElementById("bigimg").style.left = -(myscale * divleft) + "px";
               document.getElementById("bigimg").style.top = -(myscale * divtop) + "px";

           }
       </script>
   </head>

   <body>
   </body>
   <div id="smallbox">
       <div id="smallimg">
           <a href="#">
               <img id="smallimg1" src="http://img10.360buyimg.com/n1/s450x450_jfs/t4042/336/485174131/112786/cbfa499e/5851f4ecN397534ba.jpg" />
           </a>
       </div>

       <div id="movebox"></div>
   </div>
   <div id="what">
       <img id="bigimg" src="http://img10.360buyimg.com//n0/jfs/t4042/336/485174131/112786/cbfa499e/5851f4ecN397534ba.jpg" />
   </div>
<div style="width: 100px; height: 100px; background: green; position: absolute; left: 0px; top: 500px;" >图片来源京东</div>
</html>

在js部分的代码很简单，当然，你也可以选择用jq，但是没不要

0 0