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

JavaScript06

用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>

用jquery做的话,代码如下:

<title></title>

<script src="../js/jquery-1.7.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

$(".logo").mouseenter(function () {

$(".logo_pass").css("display", "block")

}).mouseout(function () {

$(".logo_pass").css("display", "none")

})

})

</script>

</head>

<body>

<div class="logo">111</div>

<div class="logo_pass" style="display:none">222</div>

</body>

</html>

js的话:

给div设置id比较好做

<script type="text/javascript">

window.onload = function () {

var logo = document.getElementById("logo")

logo.onmouseover = function () {

document.getElementById("logo_pass").setAttribute("style", "display:block")

}

logo.onmouseout = function () {

document.getElementById("logo_pass").setAttribute("style", "display:none")

}

}

</script>

</head>

<body>

<div id="logo">111</div>

<div id="logo_pass" style="display:none">222</div>

</body>

<form name="from1">

<input type="text" name="txt1" id="txt1" onblur="getVal(this.id)" />

<input type="text" name="txt2" id="txt2" onblur="getVal(this.id)" />

</form>

<script type="text/javascript">

function getVal(id)

{

alert(document.getElementById(id).value)

}

</script>

注:onblur事件是在失去焦点的时候,不知道符不符合你的要求

你还可以试试onmouseout,鼠标一移出文本框就触发