JavaScript鼠标悬浮图片放大并随鼠标移动 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .pictureList img{
                width: 320px;
                height: 160px;
            }
            .bigPicture img{
                width: 640px;
                height: 320px;
            }
            .bigPicture{
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="pictureList">
            <img src="images/pic3.jpg" >
            <img src="images/pic4.jpg" >
        </div>
        <div class="bigPicture">
            
        </div>
        <script type="text/javascript">
            let imgList = document.querySelectorAll(".pictureList img")
            let bigPicture = document.querySelector(".bigPicture")
            let pictureList = document.querySelector(".pictureList")
            for(let i in imgList){
                imgList[i].onmouseenter = function(){
                    bigPicture.innerHTML = `<img src="${this.src}" >`
                }
                imgList[i].onmouseleave = function(){
                    bigPicture.innerHTML = ``
                }
            }
            pictureList.onmousemove = function(e){
                bigPicture.style.top = e.clientY+10+"px";
                bigPicture.style.left = e.clientX+10+"px";
            }
        </script>
    </body>
</html>

 

posted @ 2021-07-29 09:56  邓居旺  阅读(462)  评论(0)    收藏  举报