js实现div随鼠标移动

最新推荐文章于 2022-10-26 09:14:21 发布
最新推荐文章于 2022-10-26 09:14:21 发布
阅读量833 收藏 2
点赞数 1
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chen_ac/article/details/119698151
版权

JavaScript DOM操作 鼠标事件 元素拖动 事件监听
关键词由CSDN通过智能技术生成 
<!-- 定义div标签 -->
<body>
    <div></div>
</body>
<style>
    div {
        width: 100px;
        height: 100px;
    }
</style>

主要在于获取到标签，通过定义mousemove事件来实现移动

    <script type="text/javascript">
        window.onload=function(){
            //获取元素标签
            var aDiv=document.getElementsByTagName('div');
            //定义鼠标移动事件响应
            document.onmousemove=function(ev){
                var oEvent=ev||event;
                //设置div当前位置为鼠标的位置
                aDiv[0].style.left=oEvent.clientX+'px';
                aDiv[0].style.top=oEvent.clientY+'px';
            }
        }
    </script>

小灰灰学编程
关注
专栏目录
div鼠标拖拽效果
ycy69616666的博客
06-02 734
思路： 1.先定义一个div，并设置一个定位 position: absolute; （如果没有定位鼠标拖拽将无法生效） 2.监听鼠标按下mousedown，鼠标抬起mouseup，鼠标移动mousemove事件 3.定义一个变量来标记鼠标是否按下 let canMove = false； 4.在mousemove事件中判断如果按下，则将鼠标位置赋值给div 5.按下时记录鼠标与div的相对位置，移动时减去这段距离 6.在mousemove事件中阻止默认行为（ e.preventDefault();），防止
js之div跟随鼠标移动
qq_41795427的博客
09-24 2297
一、主要用到的相关属性： 1）onmouseover 2）clientX、clientY 3）pageX、pageY 4）document.body.scrollTop 5）document.documentElement.scrollTop; 二、实现 第一版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
js--div跟随鼠标移动
weixin_47295886的博客
10-25 1433
使用： document.body.scrollTop|| document.documentElement.scrollTop兼容。clientX，clientY的大小是相对于可见窗口的，也就是说当窗口有滚动条出现的时候最大也只有整个可见窗口的大小，不会到滚动条下方区域。//认为浏览器的滚动条时body，可以通过。所以 =滚动条滚动的距离。
JavaScript div跟随鼠标移动
Tml的博客
05-01 1060
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>div跟随鼠标移动</title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: green; position: absolute; /* 开启box1的.
javascript之div 跟随鼠标移动
Eluckburlkmotion的博客
07-21 258
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #box1{ width:100px; height:100px; background-color:red; /* 开启box1 的绝对定位 */ position:absol
js的div跟随鼠标
weixin_46564011的博客
01-15 175
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0px; margin: 0px; } .my_div{ width: 50px; height:50px; .
jQuery实现div跟随鼠标移动
10-19
### jQuery实现div跟随鼠标移动的知识点 #### 1. jQuery基础 在深入讨论如何使用jQuery实现div跟随鼠标移动之前，需要了解jQuery的基本概念。jQuery是一个快速、小巧、功能丰富的JavaScript库，通过使用jQuery，...
js拖动div 当鼠标移动时整个div也相应的移动
10-26
这里提到的拖拽效果是当用户在最外层的div上按下鼠标并移动时，整个div元素会跟随鼠标移动。 要实现这样的效果，通常需要编写一些JavaScript代码，并且可能会使用到jQuery库来简化操作。从描述中还提到了绑定鼠标...
javascript实现鼠标点击页面 移动DIV
10-20
在本篇中，将详细介绍如何利用JavaScript实现鼠标点击页面任意位置，使页面上的一个指定DIV元素移动到点击位置的功能。 知识点包括如下几个方面： 1. **事件绑定**：在JavaScript中，事件是用户或浏览器自身执行的...
js移动层和跟随鼠标的div
03-28
NULL 博文链接：https://272426068.iteye.com/blog/1198016
jQuery浮动层 jQuery实现div跟着鼠标走
08-03
用jQuery实现div跟着鼠标走 鼠标移动时，层也跟着鼠标的移动而移动
div在固定区域跟随鼠标移动
10-13
div在固定区域跟随鼠标移动，上传的html文件，里边有简单的代码，通俗易懂。
js div随鼠标移动
weixiwo的博客
05-17 307
这几天一直补作业，今天来更新了。之前访问其他博客时，我看见有些图案可以随鼠标移动的效果，是那种浮动的，今天我们就做一个简单的div随鼠标移动吧 效果 可以随鼠标随意移动喔 #box1{ width: 100px; height: 100px; background-color: blueviolet; position: absolute; } html代码，就简单的div图片 <
js基础——div跟随鼠标移动
jwz934738949的博客
09-08 203
1、clientX、clientY可以获取元素当前窗口的偏移量； 2、pageX、pageY可以获取整个页面的偏移量，无法在IE8浏览器中实现； 3、获取滚动条的距离： 谷歌浏览器认为滚动条是属于body的，而火狐等浏览器认为滚动条是属于html的。 <!DOCTYPE html> <html lang="en"> <head> <met...
JavaScript学习笔记——div跟随鼠标移动
薛定谔的猫
10-03 480
代码】JavaScript学习笔记——div跟随鼠标移动。
js-拖拽-div跟随鼠标的拖拽而移动
最新发布
weixin_47295886的博客
10-26 1154
鼠标按下目标区域-并不松开--开始拖拽---onmousedown。鼠标移动时候被拖拽的元素跟随鼠标移动-onmousemove。当鼠标松开时，被拖拽的元素固定在当前位置onmouseup。
js之div跟随鼠标代码
qq_41555580的博客
05-22 210
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>\<style type="text/css"> #box1{ height: 100px; ...
javascript 多div跟随鼠标移动
浮生途的博客
05-09 463
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 20px; hei...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小灰灰学编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值