2018-09-27 Day28

2018-09-27 Day28 - 作业

作者: Deathfeeling | 来源:发表于2018-09-27 20:04 被阅读0次

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>

效果：