用js控制div跟随鼠标移动，鼠标点击后，鼠标离开，div留在当前点击的位置怎么做

JavaScript09

用js控制div跟随鼠标移动，鼠标点击后，鼠标离开，div留在当前点击的位置怎么做,第1张

你要的应该是拖拽效果，可以通过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>

1、如图首先在一个文件夹下创建index.html文件。

2、然后用可编辑文本文件的软件打开index.html文件，index.html的初始内容如图。

3、js的鼠标事件主要有onclick：单击事件ondbclick：双击事件onmouseover：鼠标移入事件onmouseout：鼠标移出事件onmousedown：鼠标按下事件onmouseup：鼠标松开事件。首先实现鼠标左键单击和双击的js代码如图。

4、编辑完index.html文件后，用浏览器打开index.html文件，效果如图。当鼠标左键单击span时显示"触发鼠标单击事件"，双击span时显示"触发鼠标双击事件"。

5、接着实现鼠标的移入和移出事件。如图修改index.html文件。

6、最后实现鼠标的点下和松起事件。如图修改index.html文件。

7、修改完index.html文件后，用浏览器打开index.html文件，效果如图。