怎样用js实现每次点击按钮都使div向右移动50px

JavaScript019

怎样用js实现每次点击按钮都使div向右移动50px,第1张

HTML部分

//要移动的div(操作的对象)

<div class="test" style="background:#f00width:100pxheight:100px"></div>

//按钮来触发事件

<input type="button" value="移动" id="move"/>

原生js实现

var btn_click=document.getElementById("move")//获取点击按钮

var box=document.querySelector(".test")//获取要移动的div

var a=0

btn_click.onclick=function(){

a=a+50

box.style.left=a+'px'//每点击一次,向右移动50px

}

你要的应该是拖拽效果,可以通过jq插件做

http://www.runoob.com/jqueryui/example-draggable.html

基本原理就是鼠标按下修改div的left和top(或者right/bottom)。鼠标离开不变。

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<Style>

#test{

position:absolute

}

</style>

<script>

$(document).mousedown(function(){

       $(this).mousemove(function(e){

$("#test").css({ "left": e.pageX+"px", "top": e.pageY+"px" }) 

           $(document).mouseup(function(){

               $(this).unbind('mousemove')

           })

       })

   })

</script>

</head>

<body>

<div id="test">ssssssssss</div>

</body>

</html>