2018-09-27 Day28 - 作业

1、鼠标按住拖动效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                width: 100px;
                height: 100px;
                background-color: #5F9EA0;
                position: absolute;
                left: 0px;
                top: 0px;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
        
        <script type="text/javascript">
            var div1 = document.getElementById("div1");
            var originalX = 0;
            var originalY = 0;
            var flag = false;
            
            div1.addEventListener("mousedown",function(evt){
                originalX = evt.clientX - div1.offsetLeft;   //记录事件发生的鼠标到left的距离
                originalY = evt.clientY - div1.offsetTop;
                flag = true;
            });
            
            
            div1.addEventListener("mousemove",function(evt){
                if (flag){
                    div1.style.left = (evt.clientX - originalX)+"px";
                    div1.style.top = (evt.clientY - originalY)+"px";    
                }
            });
            
            
            div1.addEventListener("mouseup",function(evt){
                flag = false;
            });
        </script>
    </body>
</html>

效果:


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容