div拖动

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
    background-color: #FF00FF;
    width: 200px;
    height: 100px;
    position: absolute;
    text-align: center;
    left: 0px;
}
</style>
</head>
<body>
    <div id="div" onclick="stopDiv()"></div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <input type="button" id="b1" value="滑滑滑" onclick="move()">
    <input type="button" id="b2" value="停停停" onclick="stopDiv()">
</body>
<script type="text/javascript" src="js/TestTimeout.js">
  
  </script>

</html>

 

 

TestTimeout.js

/**
 * 实现div拖动的代码
 */
var x = 0;
var flag = 0;

//点击滑滑滑  div滑动
function move() {
    if (flag == 0) {
        moveDiv();
    }
}

//点击停停停  div停下
function stopDiv() {
    clearTimeout(flag);
    flag = 0;
    x = parseInt(document.getElementById("div").style.left.split("px")[0]);
}

//div滑动的实现
function moveDiv() {
    var div = document.getElementById("div");
    x += 2;
    if (x > 1200)
        x = 0;

    div.style.left = x + "px";
    flag = setTimeout("moveDiv()", 10);
}


//下面是div拖动-----------

var div1 = document.getElementById("div");

//拖动div   鼠标按下
div1.onmousedown = function(event) {
    var addx = event.clientX - div1.offsetLeft;
    var addy = event.clientY - div1.offsetTop;
    div1.onmousemove = function(event) {
        div1.style.left = event.clientX - addx + "px";
        div1.style.top = event.clientY - addy + "px";

    }

}
//拖动div    鼠标松开
div1.onmouseup = function() {
    div1.onmousemove = null;
}

 

---恢复内容结束---

posted @ 2017-04-10 15:55  刘小创  阅读(1567)  评论(0)  编辑  收藏  举报