前端制作放大镜特效

Posted zpp1

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端制作放大镜特效相关的知识，希望对你有一定的参考价值。

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

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

<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>

运行结果：

技术图片

 

以上是关于前端制作放大镜特效的主要内容，如果未能解决你的问题，请参考以下文章

前端放大镜特效

前端必学——用JavaScript实现电商图片放大镜效果（附代码）

网易博客里图片放大镜效果制作方法

前端怎么实现点击图片将图片放大而且图片可以手势随意缩放，最好附上代码，非常感谢

HTML5中，如何为图片制作放大镜效果？

前端特效-Javascript实现购物页面图片放大效果