拖拽及鼠标跟随div运动

最新推荐文章于 2022-11-24 08:58:26 发布
最新推荐文章于 2022-11-24 08:58:26 发布
阅读量526 收藏
点赞数
文章标签： clientX clientY event对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38401285/article/details/79709668
版权
本文通过示例介绍了如何使用JavaScript实现鼠标跟随div运动以及拖拽div的效果。利用event.clientX和event.clientY获取鼠标在可视区的位置，并结合scrollLeft和scrollTop调整div的位置。在鼠标按下时记录初始偏移量，鼠标移动时更新div的位置，鼠标释放时解除事件监听。
摘要由CSDN通过智能技术生成

刚看了一下事件对象，即是event对象，表示当一个对象发生事件时，与这个对象相关的一些详细信息会保存到event对象中，以方便这个对象调用。低版本IE、chrome和标准浏览器的事件对象不一样。在低版本IE、chrome下，event是一个内置的全局对象;而在标准的浏览器中，事件函数的第一个参数默认为时间对象，为了兼容这些浏览器的差异，一般做一个兼容处理：

document.οnclick=function(ev){

    var ev = ev || event;

     ..........

}

event对象常用的两个属性有clientX、clientY，不带有单位

clientX表示可视区下鼠标的位置到左侧的距离，clientY表示在可视区下鼠标位置到顶部的距离。

下面做两个小例子实践一下：

1、鼠标跟随div运动，主要使用event.clientX和event.clientY，再赋值给div的left和top

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>event对象</title>
<style>
#div1{

最低0.47元/天 解锁文章
夕阳下美了剪影
关注
div鼠标拖拽效果
ycy69616666的博客
06-02 727
思路： 1.先定义一个div，并设置一个定位 position: absolute; （如果没有定位鼠标拖拽将无法生效） 2.监听鼠标按下mousedown，鼠标抬起mouseup，鼠标移动mousemove事件 3.定义一个变量来标记鼠标是否按下 let canMove = false； 4.在mousemove事件中判断如果按下，则将鼠标位置赋值给div 5.按下时记录鼠标与div的相对位置，移动时减去这段距离 6.在mousemove事件中阻止默认行为（ e.preventDefault();），防止
鼠标跟随鼠标跟随效果FLASH
12-21
鼠标跟随效果FLASH 新建FLASH空白文档，然后打开动作面板粘贴代码即可 function 鼠标跟随(myString, a, b, c, txtspeed) { Mouse.hide(); var i = 0; while (i < String_num) { this["dx" + i] = 0; this["dy" + i] = 0; var mc = _root.createEmptyMovieClip("txt" + i, i); this["color" + i] = new Color(mc); with (mc) { _xscale = _yscale = txtspeed; createTextField("mytxt", i, 0, 0, 0, 0); mytxt.autoSize = true; mytxt.text = myString.substr(i, 1); } // End of with i++; } // end while _root.onEnterFrame = function () { txt0._x = _root._xmouse; txt0._y = _root._ymouse; var _l3 = 0; while (_l3 < String_num) { this["color_from" + _l3] = {ra: 5 * _l3, rb: 255 - 2 * _l3, ga: _l3 * 20 - 100, gb: Math.floor(Math.random() * 500 - 255), gb: 100 - 20 * _l3, ba: 5 * _l3 - 50, bb: Math.floor(Math.random() * 500 - 255)}; this["color" + _l3].setTransform(this["color_from" + _l3]); this["dx" + _l3] = this["dx" + _l3] * a + (this["txt" + (_l3 - 1)]._x + c - this["txt" + _l3]._x) * b; this["dy" + _l3] = this["dy" + _l3] * a + (this["txt" + (_l3 - 1)]._y - this["txt" + _l3]._y) * b; this["txt" + _l3]._x = this["txt" + _l3]._x + this["dx" + _l3]; this["txt" + _l3]._y = this["txt" + _l3]._y + this["dy" + _l3]; _l3++; } // end while }; } var myString = "榭YOYO,欢迎光临。To Be No.1!"; var a = 0.650000; var b = 0.100000; var c = 15; var txtspeed = 150; var String_num = myString.length; 鼠标跟随(myString, a, b, c, txtspeed);
JavaScript简单拖拽事件（鼠标跟随事件）
weixin_30701521的博客
11-19 195
本例演示简单来说分为两步： 第一步：鼠标按下时的事件对象操作。 第二步：鼠标移动时对事件对象的操作。 <style> *{margin: 0; padding: 0; } #box{width: 100px;height: 100px;background: #CCC;border:...
鼠标跟随
weixin_30906701的博客
07-17 112
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { height: 5000px; ...
div运动
IT_zkc的博客
11-16 422
HTML> charset="utf-8"> 无标题文档 #div1 {width:200px; height:200px; background:red; position:absolute; top:50px; left:0px;} var timer=null; var backtimer=null; function startMove() { var oDiv=docum
js拖动div 当鼠标移动时整个div也相应的移动
10-26
首先，从标题和描述中我们可以得知，本文要讲述的是如何通过JavaScript实现一个div元素在鼠标拖动时的移动效果，这通常用于实现对话框或者窗口的拖拽功能。这里提到的拖拽效果是当用户在最外层的div上按下鼠标并移动...
jQuery实现div跟随鼠标移动
12-01
在本示例中，我们探讨了如何使用jQuery实现一个div元素跟随鼠标移动的效果。这个功能在许多交互式网页设计中非常常见，例如悬浮菜单、拖动元素等。关键在于理解和处理鼠标位置与div元素位置之间的关系。 首先，我们...
跟随鼠标走html代码,div跟随鼠标移动
weixin_26742753的博客
06-05 930
用到的三个鼠标事件:onmousedown: 当鼠标按下onmousemove：当鼠标移动onmouseup：当鼠标松开思路：动态监听鼠标位置，给div设置绝对定位(display: absolute)，在 onmousemove 事件中动态改变 div 的 left 和 top 的值。e.clientXe.clientY代码：Document.test {width: 50px;height:...
鼠标跟随网页特效
05-22
通过前端技术实现鼠标跟随特效，网站界面通过ajax等技术实现动态特效
Muuri的拖拽效果
05-06
该demo可以实现页面小框的拖拽和自动排序功能，可以搭配BootStrap使用。
vue中鼠标拖动div，（多个div）跟随卡顿问题
盛典
09-06 2034
vue写法非常的卡顿 <div v-for="(item, i) in cardList" :key="item" :ref="'box' + (i + 1)" :class="'card card' + item" @mousedown="down($event, i + 1)" @mousemove="move($event, i + 1)"
鼠标跟随移动
weixin_49346957的博客
09-29 167
css部分 <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; background: red; /* 元素必须定位 */ position: absolute; } </style> 主题结构 <!-- 为了获取滚动条 --> <body style="
JavaScript-鼠标跟随
tian_tian_gong的博客
02-18 280
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
鼠标跟随事件
热门推荐
樱花的博客
07-27 1万+
&lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;script&gt; A=document.getElementById B=document.all; C=document.layers; T1=new Array("www.baidu.com",38
Js简单的鼠标跟随
@贵阳可达鸭
07-02 555
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
案例 鼠标跟随
最新发布
Girasoles的博客
11-24 129
案例 鼠标跟随
div运动（分享到）
Z19871124123456的博客
02-13 111
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>div移动</title> 7 <style> 8 #div1 {...
Vue实现div拖动与改变大小详解
- 鼠标移动（onmousemove）：在鼠标移动过程中，计算鼠标与初始位置的偏移量，然后更新div的`left`和`top`属性，使其跟随鼠标移动。同时，需要设置一个边界检查，确保div不会超出预设的限制区域。如果超出，将其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值