집 > 기사 > 웹 프론트엔드 > 돋보기 효과를 얻기 위해 타오바오를 모방한 자바스크립트의 예

돋보기 효과를 얻기 위해 타오바오를 모방한 자바스크립트의 예

黄舟원래의: 2017-11-24 09:41:152526검색

우리 모두는 돋보기 효과가 일부 쇼핑몰에서 일반적으로 사용된다는 것을 알고 있습니다. 예를 들어 Taobao, Tmall 및 기타 PC 단말기를 열 때마다 마음에 드는 항목을 보고 사진을 클릭하면 돋보기 효과가 나타납니다. 유리가 나타납니다. 그 원리를 이해하고 분석하지 않으면 매우 마술적인 느낌이 듭니다. 실제로 접해 보면 이해하기 쉽습니다. 이전 기사에서는 돋보기를 구현하는 JavaScript의 예도 소개했습니다. 오늘은 JavaScript 모방을 소개하겠습니다. Taobao가 돋보기 효과를 구현하는 방법의 예!

전체 레이아웃을 세 부분으로 나눕니다. 첫 번째 부분은 전체 레이아웃의 왼쪽 상단에 배치되는 작은 테마 그림입니다. 두 번째 부분은 작은 그림 바로 아래에 있는 그림 목록입니다. 마지막 부분은 돋보기 표시 부분으로, 작은 이미지 오른쪽에 배치합니다.
그런 다음 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: &#39;&#39;;
            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>
    <!-- 布局-->
    <div><!-- 容器-->
        <div><!-- 小图片容器-->
            <img src="../img/magnifier/m1.jpg" alt=""/>
            <div></div><!-- 鼠标选中框-->
            <div></div><!-- 鼠标悬浮位置-->
        </div>
        <div><!-- 图片列表-->
            <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>
        </div>
        <div><!-- 放大镜-->
            <img src="../img/magnifier/b1.jpg" alt=""/>
        </div>
    </div>

    <script>
        //获取要操作的元素
        var smallbox = $(&#39;.small-box .mask&#39;);
        var smallimg = $(&#39;.small-box img&#39;);
        var square = $(&#39;.square&#39;);
        var bigbox = $(&#39;.big-box&#39;);
        var bigimg = $(&#39;.big-box img&#39;);
        var imgs = $all(&#39;.img-list img&#39;);

        //鼠标经过图片列表显示被选中，实现图片切换
        for(var i = 0; i < imgs.length; i++){
            imgs[i].onmouseover = function(){
                for(var j = 0; j < imgs.length; j++){
                    imgs[j].className = &#39;&#39;;
                }
                this.className = &#39;active&#39;;

                //改变对应的图片链接
                smallimg.src = this.getAttribute(&#39;data-small&#39;);
                bigimg.src = this.getAttribute(&#39;data-big&#39;);
            };
        }

        //鼠标移入放大器显示并设置选中框的大小
        smallbox.onmouseover = function(){
            square.style.display = &#39;block&#39;;
            bigbox.style.display = &#39;block&#39;;
            //位置w/smallimg.w = bigbox.w/bigimg.w
            square.style.width = bigbox.offsetWidth * smallimg.offsetWidth/bigimg.offsetWidth + &#39;px&#39;;
            square.style.height = bigbox.offsetHeight * smallimg.offsetHeight/bigimg.offsetHeight + &#39;px&#39;;
        };
        //鼠标移出放大器隐藏
        smallbox.onmouseout = function(){
            square.style.display = &#39;none&#39;;
            bigbox.style.display = &#39;none&#39;;
        };

        //放大器移动
        //获取鼠标的位置
        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 + &#39;px&#39;;
            square.style.top = y + &#39;px&#39;;

            //给放大器定位  x/? = smallimg.w/bigimg.w
            bigimg.style.top = -y * bigimg.offsetWidth/smallimg.offsetWidth + &#39;px&#39;;
            bigimg.style.left = -x * bigimg.offsetHeight/smallimg.offsetHeight + &#39;px&#39;;

        };

        //通过名称查找某个元素
        function $(name){
            return document.querySelector(name);
        }
        //通过名称查找相同的一组数据
        function $all(name){
            return document.querySelectorAll(name);
        }
    </script>
</body>
</html>

요약:

돋보기 효과는 다음과 같습니다. 여기까지 완료했습니다. 저 자신의 이해와 이해로 여러분의 작업에 도움이 되기를 바랍니다.

관련 추천:

JavaScript를 사용하여 돋보기 효과를 구현하는 예

CSS를 사용하여 이미지 돋보기 효과를 구현하는 예에 대한 자세한 설명(그림 )

Native JS로 간단한 돋보기 효과 구현

위 내용은 돋보기 효과를 얻기 위해 타오바오를 모방한 자바스크립트의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：돋보기 효과를 구현한 JavaScript의 예다음 기사：돋보기 효과를 구현한 JavaScript의 예