您的位置：首页 > Web前端 > JavaScript

JavaScript实现放大镜效果demo

2015-06-03 23:53 841 查看

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>JavaScript实例</title>

        <style>

           div{margin:0px;padding:0px;}

           #did{

                width:300px;

                height:300px;

                position:absolute;

                overflow:hidden;

                display:none;

           }

          

        </style>

    </head>

    <body>

        <h2>JavaScript实例: 图片放大镜效果</h2>

  

        <img id="mid" src="./images/Meinv116.jpg" width="384"/>

        <div id="did">

            <img src="./images/Meinv116.jpg"/>

        </div>

        <script type="text/javascript">

           //获取两个元素节点

           var mid = document.getElementById("mid");

           var did = document.getElementById("did");

           

           //为mid图片添加鼠标移入和移出事件

           mid.onmouseover=function(){

                did.style.top = mid.offsetTop+"px";

                did.style.left= mid.offsetLeft+mid.offsetWidth+5+"px";

                did.style.display="block";

          

           }

           mid.onmouseout=function(){

                did.style.display="none";

           }

           

           mid.onmousemove = function(evn){

               //获取兼容的event对象

               var event = window.event || evn;

               //获取鼠标在图片上的坐标位置

               var x = event.clientX-mid.offsetLeft;

               var y = event.clientY-mid.offsetTop;

               //定位放大图片的滚动条位置

               did.scrollTop = y*5-150;

               did.scrollLeft = x*5-150;

           }

           

        </script>

    </body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript
相关文章推荐
新的分享
章节导航