在JS中实现鼠标挪移上去时图片放大显示 移开时关闭

准备一个html文档

并且设置两张图片

 

<img id="pic" src="img/img/1.jpg" οnmοuseοver="showImg()" οnmοuseοut="hideImg()" />
        <div id="big_pic">
            <img src="img/img/1.jpg"/>
        </div>

然后是JS中的代码

    function showImg(){
                document.getElementById("big_pic").style.display="block";
            }
    function hideImg(){
                document.getElementById("big_pic").style.display="none";
            }

分别为隐藏和显示图片

然后通过设置的方法执行 鼠标不在小图片上时 效果如下

当鼠标挪移上时  显示