鼠標經過顯示大圖

本文轉載自查看原文 2018-05-02 15:13 1087 JavaScript

需求是這樣的，頁面中的圖片不能顯示原圖大小，那樣布局會亂掉，所以需要顯示小圖，然后當鼠標經過的時候顯示大圖即可。

<div id="Photo" style="overflow:hidden;text-align:center;padding:10px">
            
</div>
<div id="enlarge_images"></div>

頁面代碼就是這個就夠了，當然了，由於我的圖片是后台請求后加載進來的，所以圖片暫時是空的。

                var Photo = document.getElementById("Photo");
                var gg = Photo.getElementsByTagName("img");
                var ei = document.getElementById("enlarge_images");
                for (i = 0; i < gg.length; i++) {
                    var ts = gg[i];
                    ts.onmousemove = function (event) {
                        event = event || window.event;
                        ei.style.display = "block";
                        ei.innerHTML = '<img src="' + this.src + '" />';
                        ei.style.top = 60 + "px";
                        ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
                    }
                    ts.onmouseout = function () {
                        ei.innerHTML = "";
                        ei.style.display = "none";
                    }
                    ts.onclick = function () {
                        window.open(this.src);
                    }
                }

這個比較簡單，就是在鼠標經過img標簽的時候，打開顯示大圖的彈窗而已。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    #demo {
        overflow: hidden;
        width: 120px;
        text-align: center;
        padding: 10px;
    }

    #demo img {
        border: none;
        width: 100px;
        height: 100px;
        border: 5px solid #f4f4f4
    }

    #enlarge_images {
        position: absolute;
        display: none;
        z-index: 2;
        border: 5px solid #f4f4f4
    }
    </style>
</head>

<body>
    <div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px">
        <img src="aaa.jpg"><img src="aaa.jpg"><img src="aaa.jpg">
    </div>
    <div id="enlarge_images"></div>
    <script>
    var demo = document.getElementById("demo");
    var gg = demo.getElementsByTagName("img");
    var ei = document.getElementById("enlarge_images");
    for (i = 0; i < gg.length; i++) {
        var ts = gg[i];
        ts.onmousemove = function(event) {
            event = event || window.event;
            ei.style.display = "block";
            ei.innerHTML = '<img src="' + this.src + '" />';
            ei.style.top = document.body.scrollTop + event.clientY + 10 + "px";
            ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
        }
        ts.onmouseout = function() {
            ei.innerHTML = "";
            ei.style.display = "none";
        }
        ts.onclick = function() {
            window.open(this.src);
        }
    }
    </script>
</body>

</html>

完整代碼

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery鼠標經過顯示大圖 jQuery學習(一)：鼠標移動顯示大圖 JQuery鼠標移動上去顯示預覽圖 jquery實現鼠標移入圖片,顯示大圖並跟隨鼠標移動 echarts圓環圖鼠標放上去不顯示值 jQuery 仿淘寶鼠標懸停顯示大圖效果 echarts柱狀圖鼠標移動在柱狀圖上顯示數據給數據添加單位 echart-環形圖-取消或改變鼠標以上效果，取消環形圖鼠標以上變大和標簽浮框顯示鼠標經過顯示隱藏內容 C#顯示和隱藏鼠標