電子商務網站放大效果的三種常用的實作方式。-有解無憂

預覽效果（這里截取靜態，有興趣的可以運行下面的代碼）：

實作方式1.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>電子商務網站放大鏡效果1</title>
    <style type="text/css">
        html, body, div {  margin: 0;  padding: 0;  }
        #tab {  position: relative;  width: 300px;  height: 300px;margin: 50px ;  background: #CDE074;  }
        #mark {  position: absolute;  top: 0;  left: 0;  width: 100px;  height: 100px;  background: #B00000;  opacity: 0.5;  filter: alpha(opacity=50);  cursor: move;  }
        #container{ position:absolute; height:360px; width:360px; background:pink; overflow:hidden;left: 350px;top: 0px}
        #bigImg{ position:absolute; display:block; border:none;}
    </style>
</head>
<body>
    <div id="tab">
        <img src="https://img-blog.csdnimg.cn/2020073120293658.jpg" width="300" height="300" id="img1">
    </div>
<div id="jiance"></div>
</body>
</html>
<script type="text/javascript">
    var oTab = document.getElementById("tab");
    //獲得oDiv本身的高和寬；獲得oDiv距離瀏覽器左上角的位移；
    var tabT = oTab.offsetTop;
    var tabL = oTab.offsetLeft;
    var tabW = oTab.offsetWidth;
    var tabH = oTab.offsetHeight;
    //onmouseenter限制冒泡機制
    oTab.onmouseenter = function (e) {
        //創建大圖容器
        var container = document.createElement("div");
        container.id = "container";
        this.appendChild(container);
        var bigImg=document.createElement("img");
        bigImg.src="https://img-blog.csdnimg.cn/2020073120293658.jpg";
        bigImg.id="bigImg";
        container.appendChild(bigImg);
        //當滑鼠移近來的時候，動態創建一個DIV元素，id是mark
        var mark = document.createElement("div");
        mark.id = "mark";
        this.appendChild(mark);//像oTab里添加mark；
        //執行setMark
        setMark(mark, container, e);
    };
    oTab.onmousemove = function (e) {
        var mark = document.getElementById("mark");
        if (mark) {
            //先判斷mark是否存在，如果存在，執行setMark
            setMark(mark, container, e);
        }
    };
    //onmouseleave也可以顯示冒泡機制;
    oTab.onmouseleave = function () {
        var mark = document.getElementById("mark");
        if (mark) {
            //當離開的時候移除mark節點；
            this.removeChild(mark);
            this.removeChild(container);
        }
    };
    var jiance=document.getElementById("jiance");
    function setMark(mark,container,e) {
        e = e || window.event;
        //上面是系結事件的標配；
        //獲取mark這個div的寬度和高度；并且讓mark這個DIV顯示在滑鼠出現位置的正中間；
        var markW = mark.offsetWidth;
        var markH = mark.offsetHeight;
        var l = e.clientX - tabL - (markW / 2);
        var t = e.clientY - tabT - (markH / 2);
        mark.style.left = l + "px";
        mark.style.top = t + "px";
        container.style.left=tabW+10+"px";
        container.style.top=0;
        bigImg.style.left="-"+l/tabW*bigImg.width+"px";
        bigImg.style.top="-"+t/tabH*bigImg.height+"px";
        //下面是判斷邊界，當滑鼠移到左邊界和右邊界的判斷；
        if (l < 0) {
            mark.style.left = 0;
        } else if (l > (tabW - markW)) {
            mark.style.left = tabW - markW + "px";
            bigImg.style.left="-"+(tabW-markW)/tabW*bigImg.width+"px";
        }
        //當滑鼠移到上邊界和下邊界的判斷；
        if (t < 0) {
            mark.style.top = 0 + "px";
        } else if (t > (tabH - markH)) {
            mark.style.top = tabH - markH + "px";
            bigImg.style.top="-"+(tabH-markH)/tabH*bigImg.height+"px";
        }
    };
</script>

實作方式二：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>電子商務網站放大鏡效果2</title>
    <style type="text/css">
        html, body, div {  margin: 0;  padding: 0;  }
        #tab {  position: relative;  width: 300px;  height: 300px;margin: 50px ;  background: #CDE074;  }
        #mark {  position: absolute;  top: 0;  left: 0;  width: 100px;  height: 100px;  background: #B00000;  opacity: 0.5;  filter: alpha(opacity=50);  cursor: move;  }
        #container{ position:absolute; height:360px; width:360px; background:pink; overflow:hidden;left: 350px;top: 0px}
        #bigImg{ position:absolute; display:block; border:none;}
    </style>
</head>
<body>
    <div id="tab">
        <img src="https://img-blog.csdnimg.cn/2020073120293658.jpg" width="300" height="300" id="img1">
    </div>
<div id="jiance"></div>
</body>
</html>
<script type="text/javascript">
    //獲得oDiv本身的高和寬；獲得oDiv距離瀏覽器左上角的位移；
    var oDiv = document.getElementById("tab");
    var off = offset.call(oDiv);
    oDiv.onmouseenter = function (e) {
        //小圖
        var mark = document.createElement("div");
        mark.id = "mark";
        this.appendChild(mark);
        //創建大圖容器
        var container = document.createElement("div");
        container.id = "container";
        this.appendChild(container);
        var bigImg=document.createElement("img");
        bigImg.src="https://img-blog.csdnimg.cn/2020073120293658.jpg";
        bigImg.id="bigImg";
        container.appendChild(bigImg);
        setMark(mark, container, e);
    }
    oDiv.onmousemove = function (e) {
        var mark = document.getElementById("mark");
        if (mark) {
            critical(this, mark, e);
        }
    }
    oDiv.onmouseleave = function (e) {
        var mark = document.getElementById("mark");
        if (mark) {
            this.removeChild(mark);
        }
    }
    function critical(oDiv, mark, e) {
        e = e || window.event;
        var l = e.clientX - off.left - (mark.offsetWidth / 2);
        var t = e.clientY - off.top - (mark.offsetHeight / 2);
        mark.style.top = t + "px";
        mark.style.left = l + "px";
        if (l <= 0) {
            mark.style.left = 0;
        } else if (l >= (oDiv.offsetWidth - mark.offsetWidth)) {
            mark.style.left = oDiv.offsetWidth - mark.offsetWidth + "px";
        }
        if (t <= 0) {
            mark.style.top = 0;
        } else if (t >= (oDiv.offsetHeight - mark.offsetHeight)) {
            mark.style.top = oDiv.offsetHeight - mark.offsetHeight + "px";
        }
    }
    function setMark(mark,container,e) {
        e = e || window.event;
        //上面是系結事件的標配；
        //獲取mark這個div的寬度和高度；并且讓mark這個DIV顯示在滑鼠出現位置的正中間；
        var markW = mark.offsetWidth;
        var markH = mark.offsetHeight;
        var l = e.clientX - tabL - (markW / 2);
        var t = e.clientY - tabT - (markH / 2);
        mark.style.left = l + "px";
        mark.style.top = t + "px";
        container.style.left=tabW+10+"px";
        container.style.top=0;
        bigImg.style.left="-"+l/tabW*bigImg.width+"px";
        bigImg.style.top="-"+t/tabH*bigImg.height+"px";
        //下面是判斷邊界，當滑鼠移到左邊界和右邊界的判斷；
        if (l-15 < 0) {
            mark.style.left = 0;
        } else if (l > (tabW - markW)) {
            mark.style.left = tabW - markW + "px";
            bigImg.style.left="-"+(tabW-markW)/tabW*bigImg.width+"px";
        }
        //當滑鼠移到上邊界和下邊界的判斷；
        if (t < 0) {
            mark.style.top = 0 + "px";
        } else if (t > (tabH - markH)) {
            mark.style.top = tabH - markH + "px";
            bigImg.style.top="-"+(tabH-markH)/tabH*bigImg.height+"px";
        }
    };
    function offset() {
        var left = this.offsetLeft, top = this.offsetTop, par = this.offsetParent;
        while (par) {
            left += par.offsetLeft;
            top += par.offsetTop;
            if (window.navigator.userAgent.indexOf("MSIE 8.0") <= -1) {
                left += par.clientLeft;
                top += par.clientTop;
            }
            par = par.offsetParent;
        }
        return {
            left: left,
            top: top
        };
    }
</script>

實作方式三：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>電子商務網站放大鏡效果</title>
    <style type="text/css">
        html, body, div img{  margin: 0;  padding: 0;  }
        #tab {  position: relative;  width: 450px;  height: 450px;margin: 50px ;  background: #CDE074;  }
        #mark {  position: absolute;  top: 0;  left: 0;  width: 100px;  height: 100px;  background: #B00000;  opacity: 0.5;  filter: alpha(opacity=50);  cursor: move;  }
        #container{ position:absolute; height:450px; width:450px; background:pink; overflow:hidden;left: 350px;top: 0px}
        #bigImg{ position:absolute; display:block; border:none;}
    </style>
</head>
<body>
<div id="tab">
    <img src="https://img-blog.csdnimg.cn/2020073120293658.jpg" width="450" height="450" id="img1">
</div>
<div id="jiance"></div>
</body>
</html>
<script type="text/javascript">
    var oTab = document.getElementById("tab");
    //獲得oDiv本身的高和寬；獲得oDiv距離瀏覽器左上角的位移；
    var tabT = oTab.offsetTop;
    var tabL = oTab.offsetLeft;
    var tabW = oTab.offsetWidth;
    var tabH = oTab.offsetHeight;
    //onmouseenter限制冒泡機制
    oTab.onmouseenter = function (e) {
        //創建大圖容器
        var container = document.createElement("div");
        container.id = "container";
        this.appendChild(container);
        var bigImg=document.createElement("img");
        bigImg.src="https://img-blog.csdnimg.cn/2020073120293658.jpg";
        bigImg.id="bigImg";
        container.appendChild(bigImg);
        //當滑鼠移近來的時候，動態創建一個DIV元素，id是mark
        var mark = document.createElement("div");
        mark.id = "mark";
        this.appendChild(mark);//像oTab里添加mark；
        //執行setMark
        setMark(mark, container, e);
    };
    oTab.onmousemove = function (e) {
        var mark = document.getElementById("mark");
        if (mark) {
            //先判斷mark是否存在，如果存在，執行setMark
            setMark(mark, container, e);
        }
    };
    //onmouseleave也可以顯示冒泡機制;
    oTab.onmouseleave = function () {
        var mark = document.getElementById("mark");
        if (mark) {
            //當離開的時候移除mark節點；
            this.removeChild(mark);
            this.removeChild(container);
        }
    };
    var jiance=document.getElementById("jiance");
    function setMark(mark,container,e) {
        e = e || window.event;
        //上面是系結事件的標配；
        //獲取mark這個div的寬度和高度；并且讓mark這個DIV顯示在滑鼠出現位置的正中間；
        var markW = mark.offsetWidth;
        var markH = mark.offsetHeight;
        var l = e.clientX - tabL - (mark.offsetWidth / 2);
        var t = e.clientY - tabT - (mark.offsetHeight / 2);
        mark.style.left = l + "px";
        mark.style.top = t + "px";
        container.style.left=tabW+10+"px";
        container.style.top=0;
//        bigImg.style.left="-"+(l/tabW*bigImg.width)+"px";
//        bigImg.style.top="-"+(t/tabH*bigImg.height)+"px";
        //如果樣式用上面的寫，在IE678的時候有兼容性問題，應該改為下面的
        if(l<=0){
            bigImg.style.left=="0px";
        }else{
            bigImg.style.left="-"+l/tabW*bigImg.width+"px";
        }
        if(t<=0){
            bigImg.style.top=="0px";
        }else{
            bigImg.style.top="-"+(t/tabH*bigImg.height)+"px";
        }
        console.log("====t::"+parseInt(t));
        //下面是判斷邊界，當滑鼠移到左邊界和右邊界的判斷；
        if (l < 0) {
            mark.style.left = 0;
        } else if (l > (tabW - markW)) {
            mark.style.left = tabW - markW + "px";
            bigImg.style.left="-"+(tabW-markW)/tabW*bigImg.width+"px";
        }
        //當滑鼠移到上邊界和下邊界的判斷；
        if (t < 0) {
            mark.style.top = 0 + "px";
        } else if (t > (tabH - markH)) {
            mark.style.top = tabH - markH + "px";
            bigImg.style.top="-"+(tabH-markH)/tabH*bigImg.height+"px";
        }
    };
</script>

孫叫獸

CSDN認證博客專家 HTTPS Node.js JavaScript

多年的開發經驗，開發過APP,小程式，網站及系統，以前從事java相關系統研發，目前從事保險，證券，金融相關的前端全堆疊開發作業，微信公眾號：電商程式員

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/238569.html

標籤：其他

上一篇：求陣列中元素的最大值、平均值、陣列去重

下一篇：微信小程式安裝與相關知識點資訊