admin 管理员组

文章数量: 1184232

 
<!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").onmouseover=function(){
        $id("zhe").style.display="block";
        $id("max").style.display="block";
    }
    // 鼠标溢出事件，把遮罩层和放大层隐藏
    $id("box").onmouseout=function () {
        $id("zhe").style.display="none";
        $id("max").style.display="none";
    }
    $id("box").onmousemove=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>

本文标签： 快速实现 实战教程 事件

版权声明：本文标题：实战教程：用JS快速实现淘宝商品局部放大功能，提升买家体验。 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1771507127a3545392.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。