JS大小图显示

其他 2018-09-12 04:17:02 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34343637/article/details/82469996

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小图大图</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }

        #box{
            width: 312px;
            height: 467px;
            margin: 100px;
            border: 1px solid #333;
            position: relative;
            

        }

        /*掩盖的盒子与显示的盒子纯在着一定的比例否者会显示不对称

        大图显示大小 =  （大图/小图）/小图的掩盖

        */
        #box1{
            width: 288px;
            height: 289px;
            margin: 0 350px;
            left:0;
            top:0;
            border: 1px solid #333;
            position: absolute;
            overflow: hidden;
            display: none;

        }
        
        #mask{
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: rgba(0,255,0,.3);
            display: none;

        }
    </style>

</head>
<body>
    <div id="box">
        <img src="images/small.png" id="small">
        <div id="mask"></div>
        <div id="box1">
            <img src="images/big.jpg">
        </div>
    </div>


    <script type="text/javascript">
         function boxMouserMoveHandle(e){
          maskObj.style.display = "block";
          box1Obj.style.display = "block";
          //设置需要减去margin，使得图片回到，鼠标的左上角，减去自身的width height的一半，使得鼠标出现mask的中间
          var maskleft = e.clientX-100-maskObj.offsetWidth/2; 
          var masktop = e.clientY-100-maskObj.offsetHeight/2;
          // console.log(boxObj.offsetLeft);
          // 
          //（1）使用 e.client作为参考点，进行马赛克的判断。
          //
          // maskObj.style.left =  e.clientX<boxObj.offsetLeft+maskObj.offsetWidth/2? 0+"px" :maskObj.offsetLeft;
          // maskObj.style.left =  e.clientX>=boxObj.offsetLeft+boxObj.offsetWidth-maskObj.offsetWidth/2 ? (boxObj.offsetWidth-maskObj.offsetWidth)+"px":maskObj.offsetLeft;
          // maskObj.style.top =  e.clientY<boxObj.offsetTop+maskObj.offsetHeight/2? 0+"px" :maskObj.offsetTop;
          //  maskObj.style.top =  e.clientY>boxObj.offsetTop+boxObj.offsetHeight-maskObj.offsetHeight/2?boxObj.offsetHeight-maskObj.offsetHeight+ "px" :maskObj.offsetTop;

           //（2）由于image\mask是可以是属于box里面的设置为相对定位。因此可以使用相对定位的位置进行定位。
       //mask的最小距离是0 ，最大的距离位box的距离-mask的width
            maskleft=maskleft<0?0:maskleft;
            masktop =masktop<0?0:masktop;
            maskleft = maskleft>boxObj.offsetWidth-maskObj.offsetWidth?boxObj.offsetWidth-maskObj.offsetWidth:maskleft;
            masktop =masktop>boxObj.offsetHeight-maskObj.offsetHeight?boxObj.offsetHeight-maskObj.offsetHeight0:masktop;
            maskObj.style.left =maskleft+"px";
            maskObj.style.top =masktop +"px";
           

           // 按比例移动图片
           var mvbigW = ((bigObj.offsetWidth-box1Obj.offsetWidth)/(boxObj.offsetWidth-maskObj.offsetWidth))*maskleft;
           var mvbigH = ((bigObj.offsetHeight-box1Obj.offsetHeight)/(boxObj.offsetHeight-maskObj.offsetHeight))*masktop;
           bigObj.style.marginLeft = -mvbigW+"px";
           bigObj.style.marginTop = -mvbigH+"px";

      

         }
         function boxMouserOutHandle(){

             maskObj.style.display = "none";
             box1Obj.style.display = "none";

         }
        var boxObj = document.getElementById("box");
        var smallObj = boxObj.children[0];
        var maskObj = boxObj.children[1];
        var box1Obj= boxObj.children[2];
        var bigObj= boxObj.children[2].children[0];
        boxObj.onmousemove=boxMouserMoveHandle;
        boxObj.onmouseout=boxMouserOutHandle;

    </script>
    
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_34343637/article/details/82469996
今日推荐
周排行
(BIND最佳实践)Linux运维最佳实践
makefile ifeq之坑: 1. syntax error near unexpected token 2. *** missing separator. Stop.
easyui datagrid操作栏内置图片按钮
SQLyog连接MySQL时出现的2058错误解决方法
linux音频开发
hashcode方法 简析
SpringBoot中使用Transaction注解遇到的坑
逆战-CSS中子元素在父元素中的4种水平垂直居中方法
Expression.Blend.4 Chapter 图片和视频的使用
springMVC返回void值
每日归档
更多
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)
2024-09-08(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022