前端制作放大镜特效

时间：2020-04-22 22:59:56 阅读：135 评论：0 收藏：0 [点我收藏+]

标签：mouseover city etl margin 式表样式表 clientx window doc

在浏览购物网站的时候，会经常看到可以观察细节的放大镜特效，最近尝试着做服装网站，就学到一些，分享一下：

首先准备一张图片，和一张等比缩放的图片，及一张网格罩层图

<body>
    <div id = "box">
        <div id="small_box">
            <img src="xiao.jpg" alt="">
            <span id="mask">
            </span>
        </div>
        <div id="big_box">
            <img src="da.jpg" alt="">
        </div>
</div>

设置样式：因为比较简单就使用内部样式表

<style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 260px;
            height: 260px;
            border: 1px solid #dddddd;
            position: relative;
            margin: 50px;
        }
        #small_box{
            width: 260px;
            height: 260px;
            position: relative;
        }
        #small_box #mask{
            position: absolute;
            width: 100px;
            height: 100px;
            background: url(wangge.jpg) repeat;
            top:0;
            left: 0;
            opacity:0.2;
            display: none;
        }
        #big_box{
            position: absolute;
            left: 300px;
            top: 0;
            width: 260px;
            height: 260px;
            border: 1px solid #dddddd;
            overflow: hidden;
            display: none;
        }
        #big_box img{
            position: absolute;
            z-index: 5;
        }
    </style>

设置JavaScript

<script type="text/javascript">
        window.onload = function (){
            //1.获取需要的标签
            var box = document.getElementById(‘box‘);
            var small_box = box.children[0];
            var big_box = box.children[1];
            var small_img = small_box.children[0];
            var mask = small_box.children[1];
            var big_img = big_box.children[0];

            //2.监听鼠标移入
            small_box.onmouseover = function (){
                //2.1 显示网格罩层和大图出来
                mask.style.display = ‘block‘;
                big_box.style.display = ‘block‘;
                //2.2 监听鼠标移动
                small_box.onmouseover = function(e){
                    e = e || window.event;

                    //2.3 求出小盒子移动的水平和垂直的距离
                    var moveX = e.clientX - small_box.offsetLeft - box.offsetLeft - mask.offsetWidth * 0.5;
                    var moveY = e.clientY - small_box.offsetTop - box.offsetTop - mask.offsetHeight * 0.5;
                    //2.4 边界处理
                    if(moveX < 0){
                        moveX = 0;
                    }else if(moveX >= small_box.offsetWidth - mask.offsetWidth){
                        moveX = small_box.offsetWidth - mask.offsetWidth;
                    }
                    if(moveY < 0){
                        moveY = 0;
                    }else if(moveY >= small_box.offsetHeight - mask.offsetHeight){
                        moveY = small_box.offsetHeight - mask.offsetHeight;
                    }
                    // 2.5让小盒子移动起来
                    mask.style.left = moveX + ‘px‘;
                    mask.style.top = moveY + ‘px‘;
                    //2.6 让大图移动起来
                    // 公式：moveX /大图移动的距离 = (small_box宽度)/(big_img宽度 - big_box宽度)
                    var x = moveX / (small_box.offsetWidth - mask.offsetWidth);
                    var y = moveY / (big_img.offsetWidth - big_box.offsetWidth);

                    big_img.style.left = -x * (big_img.offsetWidth - big_box.offsetWidth) + ‘px‘;
                    big_img.style.top = -x * (big_img.offsetWidth - big_box.offsetWidth) + ‘px‘;
                }
            }
        }
    </script>

运行结果：

技术图片

前端制作放大镜特效

标签：mouseover city etl margin 式表样式表 clientx window doc

原文地址：https://www.cnblogs.com/zpp1/p/12757299.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行