JavaScript仿淘宝实现放大镜效果的实例

我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果。在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是非常好理解、在之前的文章我们也为大家介绍了JavaScript实现放大镜的实例,今天我们带大家介绍下JavaScript仿淘宝实现放大镜效果的实例!

我们将整个布局分三个部分,第一部分为主题的小图片,将他放在整个布局的左上角;第二部分是下边的图片列表,直接跟在小图片的下边;最后一部分是放大镜显示部分,将其定位到小图片的右边。

然后就是利用js添加基本事件(包括鼠标的移入移出等)详细的内用见如下代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        ul{

            list-style: none;

            padding: 0;

        }

        .zoom-box{

            width: 452px;

            position: relative;

        }

        .small-box{

            position: relative;

            border: 1px solid #ccc;

        }

        .small-box img{

            width: 100%;

            height: 100%;

        }

        .small-box .square{

            position: absolute;

            left: 0;

            top: 0;

            background: yellow;

            opacity: 0.5;

            /*display: none;*/

        }

        .small-box .mask{

            width: 100%;

            height: 100%;

            position: absolute;

            top: 0;

            left: 0;

        }

        .img-list ul::after{

            clear: both;

            content: '';

            display: table;

        }

        .img-list ul li{

            float: left;

            margin: 0 10px;

            padding: 6px;

        }

        .img-list img{

            border: 2px solid transparent;

        }

        .img-list img.active{

            border: 2px solid red;

        }

        .big-box{

            position: absolute;

            top: 0;

            left: 100%;

            margin-left: 2px;

            border: 1px solid #cccccc;

            width: 500px;

            height: 500px;

            overflow: hidden;

            display: none;

        }

        .big-box img{

            position: absolute;

            top: 0;

            left: 0;

        }

    </style>

</head>

<body>

    <!-- 布局-->

    <p><!-- 容器-->

        <p><!-- 小图片容器-->

            <img src="../img/magnifier/m1.jpg" alt=""/>

            <p></p><!-- 鼠标选中框-->

            <p></p><!-- 鼠标悬浮位置-->

        </p>

        <p><!-- 图片列表-->

            <ul>

                <li><img src="../img/magnifier/s1.jpg" alt="" data-small="../img/magnifier/m1.jpg"

                         data-big="../img/magnifier/b1.jpg"/></li>

                <li><img src="../img/magnifier/s2.jpg" alt="" data-small="../img/magnifier/m2.jpg"

                         data-big="../img/magnifier/b2.jpg"/></li>

                <li><img src="../img/magnifier/s3.jpg" alt="" data-small="../img/magnifier/m3.jpg"

                         data-big="../img/magnifier/b3.jpg"/></li>

                <li><img src="../img/magnifier/s4.jpg" alt="" data-small="../img/magnifier/m4.jpg"

                         data-big="../img/magnifier/b4.jpg"/></li>

                <li><img src="../img/magnifier/s5.jpg" alt="" data-small="../img/magnifier/m5.jpg"

                         data-big="../img/magnifier/b5.jpg"/></li>

            </ul>

        </p>

        <p><!-- 放大镜-->

            <img src="../img/magnifier/b1.jpg" alt=""/>

        </p>

    </p> 

    <script>

        //获取要操作的元素

        var smallbox = $('.small-box .mask');

        var smallimg = $('.small-box img');

        var square = $('.square');

        var bigbox = $('.big-box');

        var bigimg = $('.big-box img');

        var imgs = $all('.img-list img');

 

        //鼠标经过图片列表显示被选中,实现图片切换

        for(var i = 0; i < imgs.length; i++){

            imgs[i].onmouseover = function(){

                for(var j = 0; j < imgs.length; j++){

                    imgs[j].className = '';

                }

                this.className = 'active';

                //改变对应的图片链接

                smallimg.src = this.getAttribute('data-small');

                bigimg.src = this.getAttribute('data-big');

            };

        }

 

        //鼠标移入放大器显示并设置选中框的大小

        smallbox.onmouseover = function(){

            square.style.display = 'block';

            bigbox.style.display = 'block';

            //位置w/smallimg.w = bigbox.w/bigimg.w

            square.style.width = bigbox.offsetWidth * smallimg.offsetWidth/bigimg.offsetWidth + 'px';

            square.style.height = bigbox.offsetHeight * smallimg.offsetHeight/bigimg.offsetHeight + 'px';

        };

        //鼠标移出放大器隐藏

        smallbox.onmouseout = function(){

            square.style.display = 'none';

            bigbox.style.display = 'none';

        };


        //放大器移动

        //获取鼠标的位置

        smallbox.onmousemove = function(ev){

            var oEvent = ev || event;

            var x = oEvent.offsetX - square.offsetWidth/2;

            var y = oEvent.offsetY - square.offsetHeight/2;

            if(x < 0){

                x = 0;

            }

            if(x > smallbox.offsetWidth - square.offsetWidth){

                x = smallbox.offsetWidth - square.offsetWidth;

            }

            if(y < 0){

                y = 0;

            }

            if(y > smallbox.offsetHeight - square.offsetHeight){

                y = smallbox.offsetHeight - square.offsetHeight;

            }

            //给选中框定位

            square.style.left = x + 'px';

            square.style.top = y + 'px';

            //给放大器定位  x/? = smallimg.w/bigimg.w

            bigimg.style.top = -y * bigimg.offsetWidth/smallimg.offsetWidth + 'px';

            bigimg.style.left = -x * bigimg.offsetHeight/smallimg.offsetHeight + 'px';

 

        };

 

        //通过名称查找某个元素

        function $(name){

            return document.querySelector(name);

        }

        //通过名称查找相同的一组数据

        function $all(name){

            return document.querySelectorAll(name);

        }

    </script>

</body>

</html>


本博客所有文章如无特别注明均为原创。作者:东轩oba复制或转载请以超链接形式注明转自 东轩博客一个自媒体的个人优秀博客园
原文地址《JavaScript仿淘宝实现放大镜效果的实例

相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(1)

资源很哈,感谢博主.
CampaignT 1周前 (2017-12-08) 回复