鼠标经过显示大图

需求是这样的，页面中的图片不能显示原图大小，那样布局会乱掉，所以需要显示小图，然后当鼠标经过的时候显示大图即可。

<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>
完整代码

 

posted @ 2018-05-02 15:13  Rexcnblog  阅读(1531)  评论(0)    收藏  举报