div跟随鼠标移动练习

最新推荐文章于 2022-08-16 21:59:03 发布
最新推荐文章于 2022-08-16 21:59:03 发布
阅读量542 收藏
点赞数
分类专栏： 新人练手
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bigmeow_lyj/article/details/89474449
版权

body里的代码

<body style="height: 1000px;">
		<div id="Div"></div>
	</body>

CSS样式

#Div{
			width:50px ;
			height: 50px;
			background-color: greenyellow;
			position: absolute;
			/*
			 * 开启绝对定位
			 */
		</style>

onmousemove
该事件会在鼠标移动时被触发

 clientX、clientY
 获取鼠标在当前可见窗口的坐标
 
pageX、pageY
 获取鼠标相对于当前页面的坐标

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>div跟随鼠标移动</title>
		<style type="text/css">
		#Div{
			width:50px ;
			height: 50px;
			background-color: greenyellow;
			position: absolute;
			/*
			 * 开启绝对定位
			 */
		
		</style>
		<script type="text/javascript">
			window.function(){
				/*
				 * 使div可以跟随鼠标移动
				 */
				var Div=document.getElementById("Div");
				document.function(event){
					//Div.onmousemove(只在Div里移动)
					
					//获取鼠标坐标
				/*
				 * clientX、clientY
				 * 获取鼠标在当前可见窗口的坐标
				 */
				/*
				 * pageX、pageY
				 * 获取鼠标相对于当前页面的坐标
				 */
					var left=window.event.pageX;
					var top=window.event.pageY;
					
					//设置div坐标(相对于整个页面的)
					Div.style.left=left+"px";
					Div.style.top=top+"px";
					
				}
			};
		</script>
	</head>
	<body style="height: 1000px;">
		<div id="Div"></div>
		
	
	</body>
</html>

使用document.onmousemove才能保证div在整个页面移动

bigmeow_lyj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中div跟随鼠标移动的练习
Fantasc的博客
08-09 126
chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取，火狐等浏览器认为浏览器的滚动条是html的 pageX和pageY可以获取相对于当前页面的坐标，这两个属性在ie8中不兼容。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed.
JavaScript实现div块跟随鼠标移动效果
qq_39155611的博客
06-03 1544
JavaScript实现div块跟随鼠标移动效果 前面讲了这么多DOM事件有关的属性等，现在我们进行一些相关的练习，实现div块跟随鼠标移动效果，如图： HTML代码： <div id="box"></div> CSS代码： *{ margin: 0; padding: 0; } body{ width: 2000px; height: 2000px; } #box{
JS实现div随鼠标移动练习
weixin_43571052的博客
03-09 632
代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;div随鼠标移动练习&lt;/title&gt; &lt;style type="text/css"&gt; #box1{
JS基础_练习div跟随鼠标移动
兴趣是最好的老师
11-29 408
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; /* * 开启box1的绝对定位 */ p.
#神仙见了会流泪之#傻到生活不能自理的，div跟随鼠标移动练习
其实我十八，你呢？
07-11 113
废话不多说，这个练习傻到神仙见了都会流泪。 要完成的效果是div会跟随鼠标的移动而移动，废话不多说，直接上dm。 下面是第一种方法: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
练习-div随鼠标移动
weixin_51300999的博客
10-22 108
#box1{ width: 100px; height: 100px; background-color: red; //开启box1的绝对定位 position: absolute; } 注意：这里必须使用绝对定位！//相对于static定位以外的第一个父元素定位 window.onload = function(){ //获取box var box = document.getElementById("box...
JS练习 div块跟随鼠标移动
qq_45234177的博客
09-06 147
代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
.93div跟随鼠标移动
sanda_nd的博客
04-17 132
练习： 使红色方块跟随鼠标移动
js基础知识（三十二）--事件的冒泡及div跟随鼠标移动小练习
weixin_47928499的博客
08-16 465
事件的冒泡及div跟随鼠标移动小练习
鼠标跟随_练习_
09-30
在创建一个网页时，你需要定义一些元素，这些元素将会跟随鼠标的移动。例如，你可以创建一个<div>元素作为跟随目标，设置其初始位置和样式。 ```html <!DOCTYPE html> #follower { position: absolute; ...
鼠标跟随火焰_练习_
09-30
在网页开发领域，"鼠标跟随火焰"是一种常见的交互效果，它允许鼠标指针移动时，屏幕上会出现一个或多个动态元素（如火焰）跟随鼠标移动。这个"鼠标跟随火焰"的练习项目是为开发者提供了一个学习和实践这种效果的平台...
鼠标跟随线条_练习_feedhfx_termmza_
10-03
在本练习中，目标是让鼠标指针在移动时沿着预设的线条路径移动，为用户提供一种新颖且有趣的交互体验。 首先，我们需要了解HTML的基本结构，它是网页内容的基础。在实践中，可能需要创建一个容器元素来承载线条图形...
鼠标跟上_练习_braincnh_grain51l_
10-03
1. **创建元素**：首先，在HTML中创建一个需要跟随鼠标的元素，比如一个div或者img标签。给这个元素添加唯一的ID以便于JavaScript操作。 ```html <div id="follow-me">我将跟随你的鼠标</div> ``` 2. **绑定事件...
JS实现页面鼠标点击出现图片特效
11-19
最后，这个特效还可以扩展，例如，将图片跟随鼠标移动的特性加入，使图片在鼠标移动时持续显示，直到鼠标停止移动。只需将`mousedown`事件替换为`mousemove`事件，并在移动事件中更新图片的位置即可实现这一效果。 ...
html5插入video视频文件，为什么有声音不显示画面
bigmeow_lyj的博客
04-30 9776
插入video <video width="560px" height="340px" src="白宇、朱一龙 - 时间飞行~1.mp4" controls autoplay metud>非常抱歉，由于不可抗力因素，本视频无法播放</video> controls 控件播放 autoplay 自动播放 metud 静音 我在火狐运行时，只能出现声音无法...
一个简单的投票页面
bigmeow_lyj的博客
04-09 3068
用hbuilder写的一个投票页面，记录一下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>萌娃投票</title> <style type="text/css"> <!-- body,td,th { color: #...
记一次CSS @keyframes动画旋转
bigmeow_lyj的博客
04-09 1658
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css">{ margin:0 ; padding: 0; } .box{ width:50px ...
用正则表达式检验手机号码是否符合要求
bigmeow_lyj的博客
04-14 683
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 手机号码的规则： * 第一位以1开头； * 第二位为3-9任...
javascript DIV跟随鼠标移动
最新发布
06-12
可以通过监听鼠标移动事件，来实现让DIV跟随鼠标移动的效果。具体实现方式如下： 1. 获取需要跟随鼠标移动的DIV元素。 2. 监听document对象的mousemove事件。 3. 在mousemove事件处理函数中，获取鼠标的坐标，并将DIV元素的left和top属性设置为鼠标的坐标。 下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>Move Div with Mouse</title> <style> #moveDiv { position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="moveDiv"></div> <script> var moveDiv = document.getElementById('moveDiv'); document.addEventListener('mousemove', function(event) { moveDiv.style.left = event.clientX + 'px'; moveDiv.style.top = event.clientY + 'px'; }); </script> </body> </html> ``` 这个示例中，我们监听了document对象的mousemove事件，并在事件处理函数中获取鼠标的坐标，并将DIV元素的left和top属性设置为鼠标的坐标，从而实现了DIV跟随鼠标移动的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值