放大镜

您现在的位置是：首页 > 随笔小记 > 小项目

放大镜

付博瀚
小项目
2018-08-16
人已阅读

简介淘宝天猫京东常用的商品放大镜功能简单实现

分享一个放大镜功能的代码,创建个html文件直接复制到body里面就可以实现，前提是你找好图片

<style type="text/css">
       *{
           margin: 0;
           padding: 0;
       }
       .small-box{
           position: relative;
           float: left;
           margin: 50px;
           width: 300px;
           height: 300px;
       }
       .small-box img{
           width: 300px;
           height: 300px;
       }
       .small-box .tool{
           position: absolute;
           top: 0;
           left: 0;
           width: 150px;
           height: 150px;
           background-color: #ccc;
           opacity: 0.3;
           filter: alpha(opacity=30);
           display: none;
       }
       .tool.active{
           display: block;
       }
       .big-box{
           position: relative;
           margin-top: 50px;
           float: left;
           overflow: hidden;
           width: 300px;
           height: 300px;
           border: 2px solid red;
           display: none;
       }
       .big-box.active{
           display: block;
       }
       .big-box img{
           position: absolute;
           width: 600px;
           height: 600px;
       }
</style>
</head>

<body>
   <div id="smallBox" class="small-box">
       <img src="img1.png" alt="" />
       <div id="tool" class="tool"></div>
   </div>
   <div id="bigBox" class="big-box">
       <img id="bigImg" src="img1.png" alt="" />
   </div>
   <script>
       var smallBox = document.getElementById("smallBox");
       var tool = document.getElementById("tool");
       var bigBox = document.getElementById("bigBox");
       var bigImg = document.getElementById("bigImg");
       //鼠标移入
       smallBox.onmouseenter = function(){
           tool.className = "tool active";
           bigBox.className = "big-box active";
       }
       //鼠标移出
       smallBox.onmouseleave = function (){
           tool.className = "tool";
           bigBox.className = "big-box";
       }
       //鼠标在内部移动
       smallBox.onmousemove = function (e){
           e = e || window.event;
           var x = e.clientX -this.offsetLeft - tool.offsetWidth/2;
           var y = e.clientY - this.offsetTop - tool.offsetHeight/2;

           //判断透明盒子的边界
           if(x < 0){
               x = 0;
           };
           if(y < 0){
               y = 0;
           };
           if( x > this.offsetWidth - tool.offsetWidth){
               x = this.offsetWidth - tool.offsetWidth;
           }
           if( y > this.offsetHeight - tool.offsetHeight){
               y = this.offsetHeight - tool.offsetHeight
           }
           tool.style.left = x + "px";
           tool.style.top = y + "px";
           //大图的移动方向是相反的
           bigImg.style.top = -y*2 + "px";
           bigImg.style.left = -x*2 + "px";

       }
   </script>

著作权归作者所有。
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：付博瀚
来源：付博瀚个人博客
链接: https://www.fubohan.com/

上一篇：儿时的记忆——切水果

下一篇：一个运动的小球

无相关信息

您现在的位置是：首页 > 随笔小记 > 小项目

放大镜

相关文章

文章评论