这篇文章给大家介绍了“使用JS制作淘宝放大镜的代码是什么”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

本文实例为大家分享了JavaScript实现淘宝放大镜效果的具体代码，供大家参考，具体内容如下

html代码

 <div class="thumbnail">
        <img src="./img/12-1Z930152149 (2).jpg" alt="">
        <div class="magnifier"></div>
    </div>
    <div class="original">
        <img src="./img/12-1Z930152149 (2).jpg" alt="">
    </div>
<script src="./index.js"></script>

css代码 

*{
            margin: 0;
            padding: 0;
        }
        .thumbnail , .original{
            width: 400px;
            height: 400px;
            border: 1px solid red;
            position: absolute;
        }
        .original{
            left: 450px;
            overflow: hidden;
            display: none;
        }
        .thumbnail>img{
            width: 400px;
        }
        .original>img{
            width: 800px;
            position: absolute;
        }
        .magnifier{
            cursor: move;
            width: 200px;
            height: 200px;
            background-color:rgba(206, 198, 198, 0.5);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            
        }

js代码

// thumbnail   缩略图
// original    原图
// magnifier   放大镜

$(".thumbnail").mouseover(function(){
    $(".magnifier").show()
    $(".original").show()
})
$(".thumbnail").mousemove(function(ev){
    // console.log(ev)
    // 鼠标相对页面 x y 坐标
    var mx= ev.pageX;
    var my =ev.pageY;
    
    var tx = mx - $(".thumbnail").offset().left
    var ty = my - $(".thumbnail").offset().top


    var l = tx -$(".magnifier").width()/2;
    var t = ty -$(".magnifier").height()/2;

    var maxX= $(".thumbnail").width() - $(".magnifier").width();
    var maxY= $(".thumbnail").height() -$(".magnifier").height()

    // 处理边界
    if( l >maxX){
        l = maxX
    }
    if( t >maxY){
        t = maxY
    }
    if(l <0){
        l =0
    }
    if(t<0){
        t=0
    }

    //放大镜位置
    $(".magnifier").css({
        left: l +"px",
        top : t + "px"
    })

    //原图位置
    $(".original >img").css({
        left:-l*2 +"px",
        top:-t*2 +"px"
    })
})
// 鼠标离开 隐藏 放大镜 ，原图
$(".thumbnail").mouseout(function(){
    $(".magnifier").hide();
    $(".original").hide();

})

效果：

以上就是关于“使用JS制作淘宝放大镜的代码是什么”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JS中怎样实现鼠标悬停变色，代码怎样写？

  javascript实现鼠标悬停变色的方法：1、元素绑定onmouseover事件，并设置事件处理函数；2、在事件处理函数中，使用“元素对象.style.颜色属性名=颜色值;”语句设置当触发悬停事件时，元

• vue项目中实现大文件分片上传要做什么，步骤是怎样

  本文主要介绍了vue 大文件分片上传，主要包括断点续传、并发上传、秒传，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• node.js中实现socket的简单实例是怎样的

  varnet=require('net');varclient=net.connect({port:8080},function(){console.log('连接到服务器！');});client.on('data',function(data){console.log(data.toString());client.end();});

• JS中splice方法用于做什么，如何使用？

  这篇文章给大家分享的是JS中splice方法的相关内容，splice()方法可以用于删除指定数量的元素，文中详细的介绍了 splice()方法的使用，有需要的朋友可以了解看看，接下来就跟随小编一起学习一下吧。

• 用jQuery如何呼吸轮播图，思路及过程是什么

  这篇文章主要为大家详细介绍了jQuery呼吸轮播图制作原理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下