鼠标在网页上的拖动效果

最新推荐文章于 2024-07-17 15:26:15 发布

weixin_30460489

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量106

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/huanghundaxia/p/5666324.html

版权

使用JavaScript写的鼠标拖动效果

　　　　近日项目中要做一个鼠标拖拽层的效果，于是手动使用Jquery做了一个，发出来跟大伙儿分享一下，并希望能得到高手的指点，如果哪位大侠觉得我的思路和代码不正确或者需要改进的话，希望能指点一二，在下感激不尽。

效果展示

下面是我的源代码

<html>
    <head>
        <style>
            div{
                width:200px;
                height:200px;
                background-color:red;
                position:absolute;
            }
        </style>
        <script>
            function getPos(ev){
                var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;    
//                为了实现兼容性按道理来说在网页的头部加上<!DOCTYPE html>之后，只是用document.documentElement.scrollTop这个就可以了，但是谷歌
//                浏览器却不支持这个，而是支持document.body.scrollTop。由于任何一种浏览器只支持其中的一个，所以两个相加就实现了兼容性了
                var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
                return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
//                scrollLeft：页面利用滚动条滚动到右侧时，隐藏在滚动条左侧的页面的宽度
//                clientLeft：就是透过浏览器看内容的这个区域左边的宽度
            }
            document.onmousemove=function (ev){
                var aDiv=document.getElementsByTagName('div');
                var oEvent=ev||event;    
//                这一句这么写是要兼容各个浏览器，兼容IE和FireFox Chrome 只要一个为真就可以执行，在FireFox浏览器中，
//                事件绑定的函数要获取到事件本身，需要从函数中传入，而IE等浏览器则可以直接使用event或者window.event得到事件本身
                var pos=getPos(oEvent);
                for(var i=aDiv.length-1;i>0;i--){
                    aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
//                    获取的是相对于父对象的左边距，可以判断一个物体的跟document的左边距离，也就是浏览器左边缘
                    aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
                }
                aDiv[0].style.left=pos.x+'px';
                aDiv[0].style.top=pos.y+'px'; 
            }
        </script>
    </head>
    <body>
        <div><img src="images/3.jpg"></div>
        <div><img src="images/3.jpg"></div>
        <div><img src="images/3.jpg"></div>
        <div><img src="images/3.jpg"></div>
        <div><img src="images/3.jpg"></div>
        <div><img src="images/3.jpg"></div>
        <div><img src="images/3.jpg"></div>
        <div><img src="images/3.jpg"></div>
        <div><img src="images/3.jpg"></div>
        <div><img src="images/3.jpg"></div>
        <div><img src="images/3.jpg"></div>
        <div><img src="images/3.jpg"></div>
                                                      
    </body>
</html>

　　通过演示，鼠标移动onmousemover 的情况下，div会随着移动有一个重影效果。在body范围内可以随意拖动，代码注释难以理解的话，请上网搜索相关知识，希望能帮到你。

转载于:https://www.cnblogs.com/huanghundaxia/p/5666324.html

weixin_30460489

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标在网页上的拖动效果

使用JavaScript写的鼠标拖动效果　　　　近日项目中要做一个鼠标拖拽层的效果，于是手动使用Jquery做了一个，发出来跟大伙儿分享一下，并希望能得到高手的指点，如果哪位大侠觉得我的思路和代码不正确或者需要改进的话，希望能指点一二，在下感激不尽。效果展示下面是我的源代码<html> <head> ...
复制链接

扫一扫