91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JavaScript如何實現商品放大鏡效果

發布時間:2021-10-11 16:29:08 來源:億速云 閱讀:129 作者:小新 欄目:開發技術

這篇文章給大家分享的是有關JavaScript如何實現商品放大鏡效果的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。

具體內容如下

HTML+CSS部分:

<style>
        .small{
            position: relative;
            width: 400px;
            height: 450px;
            border: 1px solid #ccc;
        }
        .small img{
            width: 100%;
            height: 100%;
        }
        .small .mask{
            position: absolute;
            left: 0;
            top: 0;
            width: 300px;
            height: 300px;
            background-color: rgba(0, 255, 0, .2);
        }
        .big{
            position: absolute;
            left: 450px;
            top: 8px;
            width: 550px;
            height: 550px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }
        .big img{
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
 
<body>
    <div class="small">
        <img src="./img/small.jpg">
        <div class="mask"></div>
    </div>
    <div class="big">
        <img src="./img/big.jpg">
    </div>
</body>

JS部分:

<script>
        var small=document.querySelector('.small');
        var mask=document.querySelector('.mask');
        var big=document.querySelector('.big');
        var bigImg=document.querySelector('.big>img');
        // 拿到大圖的寬高
        var bigWidth=bigImg.offsetWidth;
        var bigHeight=bigImg.offsetHeight;
 
        // 
        function move(e){
            var x=e.pageX - this.offsetLeft;
            var y=e.pageY - this.offsetTop;
            console.log(x,y);
            // 移動遮罩位置
            var maskHeight = mask.offsetHeight/2;
            var maskWidth = mask.offsetWidth/2;
            mask.style.left = x - maskWidth+'px';
            mask.style.top = y - maskHeight+'px';
 
        // 限制遮罩的移動范圍
            // console.log('mask.offsetTop',mask.offsetTop);
            // console.log('mask.offsetLeft',mask.offsetLeft);
            var maxLeft=small.offsetWidth - mask.offsetWidth;
            if(mask.offsetTop<0){
                mask.style.top=0;
            }
            if(mask.offsetLeft > small.offsetWidth - mask.offsetWidth){
                mask.style.left =maxLeft+'px';
            }
            if(mask.offsetLeft<0){
                mask.style.left = 0;
            }
            if(mask.offsetTop > small.offsetHeight - mask.offsetHeight){
                mask.style.top = small.offsetHeight - mask.offsetHeight + 'px';
            }
 
        // bigImg 大圖  big  大盒子     大圖的移動
        // (bigImg.offsetWidth - big.offsetWidth) / (samll.offsetWidtth - mask.offsetWidth)
        //   大圖的最大移動距離  = - 遮罩的移動距離 * 大圖的最大距離 / 遮罩的最大移動距離
            bigImg.style.left = -mask.offsetLeft*(bigImg.offsetWidth - big.offsetWidth) / (small.offsetWidth - mask.offsetWidth)+"px";
            bigImg.style.top = -mask.offsetTop*(bigImg.offsetHeight - big.offsetHeight) / (small.offsetHeight - mask.offsetHeight)+"px";
        }
       
        // 小圖上移動遮罩
        small.addEventListener('mousemove',move);
        small.addEventListener('mouseover',function(){
            big.style.display='block';
            mask.style.display='block';
        })
        small.addEventListener('mouseout',function(){
            big.style.display='none';
            mask.style.display='none';
        })
</script>

效果演示:

JavaScript如何實現商品放大鏡效果

感謝各位的閱讀!關于“JavaScript如何實現商品放大鏡效果”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

商南县| 封丘县| 柘荣县| 和平区| 绥滨县| 芷江| 油尖旺区| 乌兰县| 贵港市| 土默特右旗| 淮安市| 涿鹿县| 礼泉县| 淮北市| 澄城县| 姜堰市| 增城市| 化隆| 华池县| 云和县| 阿坝县| 常熟市| 大新县| 洪江市| 泸西县| 弥勒县| 榆林市| 眉山市| 文山县| 吴川市| 南乐县| 海林市| 丰原市| 扶风县| 英山县| 清流县| 涞源县| 大方县| 四川省| 开鲁县| 枣庄市|