照片放大镜制作/JS五

图片效果如下：
在鼠标没有移入图片的时候

鼠标移入的时候

鼠标移动到那个位置就把那个位置放大

计算比例
宽比例 move的宽度-小盒子的宽度 /大盒子的宽度-大照片的宽度
高比例move的高度-小盒子的高度 /大盒子的高度-大照片的高度

代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .smallBox {
            position: relative;
            width: 400px;
            height: 250px;
            margin-left: 0px;
            margin-top: 0px;
            float: left;
            display: inline-block;
        }
        .smallBox img {
            width: 400px;

        }
        .bigBox {
            position: relative;
            width: 800px;
            height: 500px;
            margin-left: 50px;
            margin-top: 100px;
            left: 350px;
            top: -350px;
            float: left;
            border: 1px solid #ccc ;
            overflow: hidden;
            display: inline-block;
          /*  display: none;*/
        }
        .move {
            position: absolute;
            left:0;
            top:0;
            width: 120px;
            height: 120px;
            background-color: rgba(234,23,56,0.4);
            /*display: none;*/
        }
        #bigPic {
            position: absolute;
            left: 0;
            top:0;
        }

    </style>
</head>
<body>
<!--小盒子-->
<div class="smallBox">
    <img src="images/2-small.jpg" alt="" id="smallPic">
    <div class="move"></div>
</div>
<div class="bigBox">
    <img src="images/2-big.jpg" alt="" id="bigPic">
</div>

<script src="获取元素.js"></script>
<script>
/*
offsetleft  offsetTop
有绝对定位属性的： 他获取的是距离父元素左上角的距离值
没有绝对定位属性  他获取的是距离body 左上角的距离值
* offsetWidth
* offsetHeight --->盒模型总高
*
* */
 window.onload = function () {
     var smallBox = my$('.smallBox') //小盒子
     var move = my$('.move') //运动元素
     var bigBox = my$('.bigBox') //大盒子
     var bigPic = my$('#bigPic') //大照片
     /*
     * 1:阴影块随着鼠标动---》获取鼠标位置
     *
     * */


     /*smallBox.onmouseover = function(){
         //让move和大盒子显示
         move.style.display = 'block'
         bigBox.style.display = 'block'
     }

     smallBox.onmouseout = function(){
         move.style.display = 'none'
         bigBox.style.display = 'none'

     }
*/
     //鼠标移入显示
     smallBox.onmouseover = function(){
         //让move和大盒子显示
         move.style.display = 'block'
         bigBox.style.display = 'block'
     }
     //鼠标移开消失
     smallBox.onmouseout = function(){
         move.style.display = 'none'
         bigBox.style.display = 'none'

     }

     //鼠标在小照片盒子上运动
     smallBox.onmousemove = function (e) {
         //将鼠标变为移动样式
         this.style.cursor = 'move'
         console.log(e.clientX)
         //先判断此时偏移量到底满足条件与否 如果不满足不赋值
         //只需要判断超出边界的情况  水平运动 最小值 0
         // 最大值 smallBox.offsetWidth-move.offsetWidth
         var newLeft = e.clientX-smallBox.offsetLeft-move.offsetWidth/2;
         var newTop =  e.clientY-smallBox.offsetTop-move.offsetHeight/2;

         if(newLeft < 0){
             newLeft = 0;

         }
         if(newLeft > smallBox.offsetWidth-move.offsetWidth ){
             newLeft = smallBox.offsetWidth-move.offsetWidth
         }
         if(newTop < 0){
             newTop = 0;

         }
         if(newTop > smallBox.offsetHeight-move.offsetHeight ){
             newTop = smallBox.offsetHeight-move.offsetHeight
         }
         move.style.left = newLeft +'px'
         move.style.top = newTop +'px'
        
         var widthRate = (my$('.move').offsetWidth -smallBox.offsetWidth)/
             (bigBox.offsetWidth-bigPic.offsetWidth) ;

         var heightRate = (my$('.move').offsetHeight -smallBox.offsetHeight)/
             (bigBox.offsetHeight-bigPic.offsetHeight) ;

         bigPic.style.left = -parseInt(move.style.left) / widthRate +'px'
         bigPic.style.top = -parseInt(move.style.top) / heightRate +'px'
     }

 }

</script>
</body>
</html>
照片放大镜制作/JS五

猜你喜欢
