商品放大镜效果

Posted 2020-09-10 无花即无果

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了商品放大镜效果相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding:0px;margin:0px;
            }
            .smallpic{
                width: 450px;
                height: 450px;
                border: 1px solid #ccc;
                position: relative;
            }
            .smallpic img{
                width: 450px;
                height: 450px;
            }
            .mask{
                position: absolute;
                left:0px;top:0px;
                width: 50px;
                height: 50px;
                background: rgba(169,255,0,0.5);
                visibility: hidden;
            }
            .bigpic{
                width: 600px;
                height: 600px;
                border: 1px solid #ccc;
                position: absolute;
                left:455px;
                top:0px;
                overflow: hidden;
                visibility: hidden;
            }
            .bigpic img{
                position: absolute;
                left:0px;
                top:0px;
            }
        </style>
    </head>
    <body>
        <div class="smallpic" id="smallpic">
            <img src="telphone.png"/>
            <div class="mask" id="mask"></div>
        </div>
        <div class="bigpic" id="bigpic">
            <img src="telphone.png" id="img1"/>
        </div>
        <script type="text/javascript">
            var oSmallPic=document.getElementById(‘smallpic‘);//小图
            var oMask=document.getElementById(‘mask‘);//小芳
            var oBigPic=document.getElementById(‘bigpic‘);//大芳
            var oImg1=document.getElementById(‘img1‘);//大图
            //小方/大方=小图/大图=scale
            oSmallPic.onmouseover=function(){
                //让小芳和大芳显示
                oMask.style.visibility=‘visible‘;
                oBigPic.style.visibility=‘visible‘;
                //求小芳的尺寸
                oMask.style.width=oBigPic.offsetWidth*oSmallPic.offsetWidth/oImg1.offsetWidth+‘px‘;
                oMask.style.height=oBigPic.offsetHeight*oSmallPic.offsetHeight/oImg1.offsetHeight+‘px‘;
                //求比例:倍数
                var scale=oBigPic.offsetWidth/oMask.offsetWidth;
                
                this.onmousemove=function(ev){
                    var ev=ev||window.event;
                    //让鼠标移动的放置在盒子的中间
                    var l=ev.clientX-oMask.offsetWidth/2;
                    var t=ev.clientY-oMask.offsetHeight/2;
                    if(l<0){
                        l=0;
                    }else if(l>=oSmallPic.offsetWidth-oMask.offsetWidth){
                        l=oSmallPic.offsetWidth-oMask.offsetWidth;
                    }
            
                    if(t<0){
                        t=0;
                    }else if(t>=oSmallPic.offsetHeight-oMask.offsetHeight){
                        t=oSmallPic.offsetHeight-oMask.offsetHeight;
                    }
                    //判断小芳不能移出小图的范围。
                    //赋值给小芳
                    oMask.style.left=l+‘px‘;
                    oMask.style.top=t+‘px‘;
                    //将对应比例赋给大图
                    oImg1.style.left=-l*scale+‘px‘;
                    oImg1.style.top=-t*scale+‘px‘;
                    
                }
            }
            
            oSmallPic.onmouseout=function(){
                oMask.style.visibility=‘hidden‘;
                oBigPic.style.visibility=‘hidden‘;
            }
        </script>
    </body>
</html>

以上是关于商品放大镜效果的主要内容，如果未能解决你的问题，请参考以下文章

JS实现淘宝商品图片放大效果（放大镜）

商品放大镜的效果的实现！

vue实战——商品放大镜组件封装及效果实现