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

如题所述

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

温馨提示:内容为网友见解,仅供参考
无其他回答

用js控制div跟随鼠标移动,鼠标点击后,鼠标离开,div留在当前点击的位置怎...
你要的应该是拖拽效果,可以通过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;...

用js控制div跟随鼠标移动,鼠标点击后,鼠标离开,div留在当前点击的位置怎...
} <div onmousedown="Move_obj(this.id)" id="dd" style="width:100px;height:100px;background:red"><\/div> 如果需要以后都留在此位置,需把当前位置的坐标保存到数据库,下次打开时读取数据加载div

怎样用js实现鼠标悬停一个div,让另一个div用指定的样
使用JavaScript实现鼠标悬停效果,通过`addEventListener`监听事件并操作样式。先利用`document.querySelector`获取目标元素和要改变样式的元素。`addEventListener`用于监听目标元素的鼠标悬停和离开事件,通过`classList`添加或移除指定样式类。在CSS中预先定义样式类`hover-style`,便于JavaScript调用以实现悬停效果。

js如何实现:在页面中任意位置点击鼠标,则在该位置显示一个div
1.页面复制有一个id为c2的div,下面有一个子div,下面有一个按钮,事件是用来点击100个adddiv。2.在event函数中,定义一个内容为degreediv字符的字符串变量。3.然后使用jquery的append将已知的div字符串添加到c2div,如下所示。4.运行页面,现在只看到一个div,如下图所示。5.单击下面的按钮来触发添...

js点击div移动位置?
JavaScript当鼠标点击div时,这个div自动向上移动怎么实现这个很好办,先设置div中的图片的display='none',鼠标移入div,再设置他的style.display='block'就可以了 怎样用js实现每次点击按钮都使div向右移动50pxHTML部分 \/\/要移动的div(操作的对象)divclass="test"style="background:#f00;width:100px;...

鼠标放在超链接上, 显示DIV。 移开后隐藏DIV。
1、首先我们在html里定义一个div,id为‘mouse_div’,然后定义该div的样式,主要是定义position,让其绝对定位。2、然后通过JS脚本来做随鼠标移动的效果。先引入jquery脚本,因为用到jquery操作dom。3、最后添加代码,在页面加载完后,给页面添加鼠标mousemove事件,在事件函数里,调用 moving方法,就实现...

关于js的鼠标移入移出事件
在JavaScript中,处理鼠标移入和移出事件主要使用onmouseenter、onmouseover、onmouseleave和onmouseout属性。具体代码如下:为id为"selectModal"的元素绑定鼠标移入事件:document.getElementById("selectModal").onmouseenter = function() { console.log('鼠标移入')} 绑定鼠标移出事件:document.getElement...

js设置光标位置(js获取光标所在元素)
出于安全性考虑和浏览器限制,js不能够设置鼠标的位置,如果提供此项功能,那岂不是在网页上就能控制用户的鼠标移动,这是不能被允许的。 只能够获取鼠标的位置,而不能设置鼠标的位置。4. js获取光标所在位置鼠标点击事件其实用onclick事件就可以捕获了。5. js获取光标所在元素上的字符1.在文件夹中创建一个test的...

求一个js控制div的显示隐藏 实现某一区域 获得鼠标焦点显示上方的两个...
这个用jquery就相当简单了。原生态js稍微复杂些 html代码:<div id="img"> <img src="..1.jpg"> <img src="..1.jpg"> <\/di> <br\/> <input type="text" id='in'> css代码:img{display:none} jqury代码:(function(){ ("#in").foucs(function(){ ("#img").show()}) .blur...

鼠标事件,js代码实现div移动功能
首先引入jquery框架 例如 jquery-1.7.1.js \/\/$("#div1")表示要移动的div ("#div1").animate({top:'+=200px'},"slow");\/\/向上移动200px;("#div1").animate({top:'-=200px'},"slow");\/\/向下移动200px;回到原来的位置

相似回答