event 事件 div鼠标跟随

最新推荐文章于 2023-06-10 17:28:29 发布
最新推荐文章于 2023-06-10 17:28:29 发布
阅读量75 收藏
点赞数
原文链接：http://www.cnblogs.com/mingjixiaohui/p/5268678.html
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 10px;
				height: 10px;
				background: red;
				position: absolute;
			}
		</style>
		<script>
			function getPos(ev){
				var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
				
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				
				return {x:ev.clientX +scrollLeft , y:ev.clientY + scrollTop};
			}
			
			window.onload = function(){
			//第一种方法：
//			document.onmousemove = function(ev){
//				var oEvent = ev || event;
//				var aDiv = document.getElementsByTagName("div");
//				
//				for(var i= aDiv.length-1;i>0;i--)
//				{
//					//后一个div跟着前一个div
//					aDiv[i].style.left = aDiv[i-1].offsetLeft +"px";
//					aDiv[i].style.top = aDiv[i-1].offsetTop +"px";
//				}
//				var pos = getPos(oEvent);
				alert(pos.x);
//				//第一个是跟着鼠标走
//				aDiv[0].style.left = pos.x +"px";
//				aDiv[0].style.top = pos.y +"px";
//			}


			//第二种方法
			document.onmousemove = function(ev){
				clearInterval(time)
				var aDiv = document.getElementsByTagName("div");
				var oEvent = ev || event;
				var pos = getPos(oEvent);
				var time ;
				var i = 0;
				function move(){
					//定时器调用一次就给后一个div定位
					aDiv[i].style.left =pos.x  +"px";
					aDiv[i].style.top = pos.y +"px";
					i++;
					if(i>aDiv.length)
					{
						clearInterval(time);
					}
				}
				time = setInterval(move,10);
			}
			
		}
		</script>
	</head>
	<body style="height: 2000px;">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

　　

转载于:https://www.cnblogs.com/mingjixiaohui/p/5268678.html

weixin_34151004
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【前端】div添加点击事件
Bing's Blog
11-27 9024
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Test Div Event&lt;/title&gt; &lt;style&gt; #test { background-color: red; margin-left: 100px; margin-right: 100px; padding:...
event 事件 clientX 和clientY 配合scrollTop使用, div跟着鼠标走
weixin_33840661的博客
03-12 162
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 200px; height: 200px; ...
Event事件学习实用路线（7）——Event事件之事件鼠标信息——案例：实现鼠标跟随
xiao廸要飞
04-25 280
鼠标位置获取 鼠标事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
div移动层精简示例（event事件兼容多浏览器）
chinmo的收藏
03-14 991
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html xmlns="http://www.w3.org/1999/xhtml">head>title> New Document title>meta h
JS 之 事件Event对象详解（属性、方法、自定义事件）
最新发布
weixin_45092437的博客
06-10 9754
​ 事件event对象是指在浏览器中触发事件时，浏览器会自动创建一个event对象，其中存储了本次事件相关的信息，包括事件类型、事件目标、触发元素等等。浏览器创建完event对象之后，会自动将该对象作为参数传递给绑定的事件处理函数，我们可以在事件处理函数中通过访问event对象的属性和方法，来获取事件的相关信息，并做出后续的逻辑处理。
Event事件学习实用路线（11）——Event事件之鼠标滚轮——案例：改变div宽高度
xiao廸要飞
04-26 361
Event事件之鼠标滚轮——案例：改变div宽高度鼠标滚轮mousewheel和DOMMouseScroll案例：改变div宽高度 鼠标滚轮 mousewheel和DOMMouseScroll mousewheel：兼容谷歌和ie e.wheelDelta：滚轮向上 - > 120 滚轮向下 - > -120 document.addEventListener('m...
javascript DIV跟随鼠标移动
10-22
JavaScript中的DIV跟随鼠标移动是一种常见的动态效果，常用于创建交互式网页。这个效果可以通过监听鼠标的移动事件并更新DIV的位置来实现。以下是对这个技术的详细解析： 首先，我们需要一个HTML结构，包含一个或者...
鼠标跟随事件的介绍
12-09
"鼠标跟随事件"是一种常见的用户交互事件，它允许元素在屏幕上随着鼠标的移动而移动，为用户提供直观的反馈。这个概念主要适用于Web开发和图形用户界面（GUI）应用。 在JavaScript中，我们可以使用`mousemove`事件...
鼠标跟随效果代码
09-06
在网页设计中，鼠标跟随效果是一种常见的交互设计技术，它可以使元素随着用户的鼠标移动而动态地改变位置，常用于广告展示、提示信息等场景。在给出的代码中，我们可以看到一个简单的JavaScript实现的鼠标跟随效果。...
HTML跟随鼠标特效.rar
06-29
我们需要监听鼠标的`mousemove`事件，当鼠标移动时，更新容器元素的`left`和`top`属性，使其跟随鼠标位置。以下是一个简单的示例： ```javascript document.addEventListener('mousemove', function(event) { var ...
JavaScript 获取鼠标(event)在盒子(div)中的位置
houyanhua1的专栏
03-16 6615
demo.html：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .box {
前端js的event光标事件实现div方块移动
qq_39634880的博客
05-23 554
方法一:普通做法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>移动的方块</title> <style> #div{width: 100px; height: 100px; background: deeppink...
鼠标移动到div上时，获取事件对象event、容器id、鼠标的位置
lianflower的博客
04-09 1537
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.3.1.min.js" type="text/javascript"&gt...
event事件对象几个属性的区别
@贵阳可达鸭
07-02 1413
<!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-U...
js之【窗口事件和event对象】（有一个追踪鼠标定位的小栗子）
To be a better man！
04-25 1076
一、窗口事件练习： 窗口事件有两种写法： ①写在script标签中，即： window.onload = init; 当写在script中时，window.onload = 函数名。 注意：此时，函数名后一定不要加括号() ②写在body标签里边，即 当写在body标签里时，onload = 函数名(); 注意：此时，函数名后 要加上括号()。 例如：
JavaScript事件对象中Event属性的简单使用
猫老爷
01-16 4046
Event参数可以帮到你!!! 开发工具与关键技术：DreamWeaver Event参数 作者:听民谣的老猫（博客） 撰写时间：2019/1/16 15:30 在JavaScript学习过程中接触到的Event参数，在后期学习中对Event参数的使用和理解 你在前端学习过程中有想过鼠标点哪里某个div或者某张图片就出现在哪里，某个div或者某张图片跟着鼠标移动，通过按下某个键盘来达到...
Event事件专题
黎小小的博客
08-11 430
知识点 ： ## 知识点 - 事件监听器 - 事件监听和事件绑定的区别 - addEventListener(type, listener[, options|useCapture]) - 事件流 - 事件冒泡 - 事件捕获 - 事件监听相关配置 - capture 是否在捕获阶段执行 - once 是否只执行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值