js 放大镜（淘宝商品图片放大镜）

最新推荐文章于 2024-07-10 10:06:23 发布

熬夜真好玩

最新推荐文章于 2024-07-10 10:06:23 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/enwoyaohaohaoxuexi/article/details/83038767

版权

本文介绍如何使用JavaScript创建一个商品图片放大镜效果，类似于淘宝网站上的功能。通过结合CSS样式和JavaScript交互，实现鼠标悬浮时显示放大区域，提供用户更清晰查看商品细节的能力。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    #box{
        width: 350px;
        height: 350px;
        position: relative;
        /*margin: 100px ;*/
        border: 1px solid black;
    }
    #zhe{
        width: 170px;
        height: 170px;
        background-color: paleturquoise;
        opacity: 0.3;
        position: absolute;
        left: 0;
        top: 0;
        cursor: move;
        display: none;
    }
    #max{
        width: 400px;
        height: 400px;
        position: absolute;
        left: 360px;
        top: 0;

        display: none;
        /*关键 显示鼠标移动到的地方局部放大照片*/
        overflow: hidden;
    }
    #bigpicture{
        position: absolute;
    }

</style>
<body>
<div id="box">
    <div id="min">
        <img src="../../img/001.jpg" alt="">
        <!--遮罩层-->
        <div id="zhe"></div> 
    </div>
    <!--图片放大显示的div-->
    <div id="max">
        <img src="../../img/0001.jpg" alt="" id="bigpicture">
    </div>
</div>
</body>
<script src="../../js/public.js"></script>
<script>
    // 鼠标移入事件，遮罩层和显示放大照片层出现
    $id("box").οnmοuseοver=function(){
        $id("zhe").style.display="block";
        $id("max").style.display="block";
    }
    // 鼠标溢出事件，把遮罩层和放大层隐藏
    $id("box").οnmοuseοut=function () {
        $id("zhe").style.display="none";
        $id("max").style.display="none";
    }
    $id("box").οnmοusemοve=function(e){
        var e=e||event;
        var x=$id("box").offsetLeft;
        var y=$id("box").offsetTop;
        var l=e.pageX-x-$id("zhe").offsetWidth/2;
        var t=e.pageY-y-$id("zhe").offsetHeight/2;
        var left=$id("box").offsetWidth-$id("zhe").offsetWidth;
        var top=$id("box").offsetHeight-$id("zhe").offsetHeight;
        if(l<0){
            l=0;
        }else if(l>left){
            l=left;
        }
        if(t<0){
            t=0;
        }else if(t>top){
            t=top;
        }
        $id("zhe").style.left=l+"px";
        $id("zhe").style.top=t+"px";
        var bigl=(l*$id("bigpicture").offsetWidth)/$id("box").offsetWidth;
        var bigt=(t*$id("bigpicture").offsetHeight)/$id("box").offsetHeight;
        $id("bigpicture").style.left = -bigl+"px";
        $id("bigpicture").style.top = -bigt+"px";
    }

</script>
</html>