一串跟随鼠标的div

最新推荐文章于 2023-12-28 16:28:26 发布
最新推荐文章于 2023-12-28 16:28:26 发布
阅读量336 收藏
点赞数 1
分类专栏： web大前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jingtian678/article/details/55587375
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一串跟随鼠标的div</title>
<style>
div{height: 100px; width:150px; position: absolute;}
img{height: 100px; width:150px;}
</style>
</head>
<body>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/3.jpg"></div>
<script>
function getPos(ev)
{
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x: ev.clientX+scrollLeft,y: ev.clientY+scrollTop};
}
document.οnmοusemοve=function(ev)
{
var aDiv=document.getElementsByTagName('div');
var oEvent=ev||event;
var pos=getPos(oEvent);
for(var i=aDiv.length-1;i>0;i--)
{
aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
}
aDiv[0].style.left=pos.x+'px';
aDiv[0].style.top=pos.y+'px';
}
</script>
</body>
</html>
jingtian678
关注
专栏目录
JavaScript鼠标事件
wx13269317296的博客
01-11 573
鼠标单击是触发：click鼠标双击是触发：dblclick 鼠标按下时触发：mousedown 鼠标抬起时触发：mouseup 鼠标移动时触发：mousemove div.addEventListener(‘mousedown’,function(){console.log(‘这是按下事件’);}); div.addEventListener(‘mouseup’,function(){conso...
JavaScript实现一串div跟随鼠标移动效果（幻影效果）
qq_39155611的博客
06-03 1144
JavaScript实现一串div跟随鼠标移动效果 上一篇博文我们说到了利用JavaScript实现div块跟随鼠标移动的效果。现在来讲一个进阶版，实现一串div跟随鼠标移动效果，鼠标幻影效果。如图： HTML代码： <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"&gt
一串跟着鼠标移动的div
qq_27891995的博客
03-18 191
正确的动态效果 &lt;script&gt; function getPos(ev) { var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; ...
javascript中级--事件--一串跟随鼠标div
Z19871124123456的博客
03-07 89
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
JavaScript中的鼠标事件
qq_41352360的博客
03-08 256
JavaScript中的鼠标事件 onclick(单击事件) onmouseover(鼠标经过事件) onmouseout(鼠标移开事件) onchange(文本框内容改变) onselect(文本框选中) onfocus(光标聚集) onblur(光标移开) onload(载入网页 body标签 ) onunload(关闭网页) JavaScript的内置对象 Date()...
一串跟随鼠标的DIV
bangxionger9224的博客
03-22 124
div跟随鼠标移动的函数：<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 { width: 200px; ...
mousemove实现一一串div跟随鼠标
BearP的博客
05-20 473
mousemove实现一串div跟随鼠标 最近学习JavaScript,学习到了鼠标世事件,感觉很有意思,写了一个跟随鼠标移动的div串.代码比较简单. 代码思路 由于是多个div,所有不采用html标签的方式.,使用JavaScript设定.( document.createElement() ); 创建一个空数组,存储生成的div 给鼠标添加移动事件 设定循环,更新靠后div的坐标,将前面div的坐标赋值给后面div的坐标,从而实现一串运动 将第0个div复制当前鼠标的坐标 <style&gt
跟随鼠标走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:...
一串跟着鼠标的div
weixin_30414305的博客
07-23 72
一串跟着鼠标的div: window.onload=function(){ var oBox=document.getElementById("box"); var aDiv...
一串div跟着鼠标移动
Vivian_shuang的博客
07-13 460
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> style type="text/css"> div { width: 10px; height: 10px; background-color: lawngreen; border-radius: 50%; position: ab
跟随鼠标一串的效果
OrdnAry的博客
08-22 202
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{width:10px;hei
JavaScript中的鼠标事件及事件对象
zw06121的博客
08-19 1746
1. 鼠标事件 mouseover和mouseout 当鼠标进入元素区域内触发和离开元素区域内触发 这两个事件是冒泡的,就是当前事件会冒泡给父元素,一层一层冒泡 mouseenter和mouseleave 与mouseover和mouseout效果一致,但是这两个事件不冒泡 2. 事件对象的属性 2.1 常用属性 bubble 返回的是布尔值,表示...
用js实现鼠标后跟随一串叶子的效果
xiamoziqian的博客
12-27 801
做了一个比较有意思的效果，鼠标移动的过程中，后边紧跟一串树叶或者小圆点（可以根据实际需求把元素替换成你想要的东西）。 html部分 //一些标签元素，会随着鼠标移动 &lt;span class="circle" style="top:200px;left:150px;"&gt;&lt;/span&gt; &lt;span class="circle" style="top:300px;left.
JavaScript 常用事件大全
最新发布
mzdxxcdh的博客
12-28 2703
事件是发生在你正在编程的系统中的事情——当事件发生时，系统产生（或“触发”）某种信号，并提供一种机制，当事件发生时，可以自动采取某种行动（即运行一些代码）。事件是在浏览器窗口内触发的，并倾向于附加到驻留在其中的特定项目。这可能是一个单一的元素，一组元素，当前标签中加载的 HTML 文档，或整个浏览器窗口。有许多不同类型的事件可以发生。
Js之鼠标事件-鼠标事件
cx1361855155的博客
08-04 9395
鼠标点击事件包括 click（点击），dbclick（双击），mousedown（按下）和 mouseup（松开）四个。其中 click 事件比较常用，而mousedown 和 mouseup事件类型多用于鼠标施放，拉伸操作中。如果从父元素中移动到子元素中，也会触发元素的mouseover事件类型。mousemove 事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动一个像素），就会触发mousemove事件。该事件响应的灵敏度主要参考鼠标指针的移动速度块慢以及浏览器跟踪更新的速度。...
JavaScript 十种鼠标事件
freedomVenly的博客
06-04 3543
1、onclick
JavaScript：实现鼠标的悬停及移出事件
热门推荐
microcosmv的博客
07-16 8万+
Event 对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行！ 事件句柄　(Event Handlers) 属性 此事件发生在何时… onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 例1：鼠标悬停和移出显示为两种CSS
JavaScript实现鼠标下动态跟随的div效果
本文档主要探讨了如何利用JavaScript实现动态效果，让一个div元素跟随鼠标移动。这个技术在网页交互设计中非常实用，它能够增强用户体验，使元素更具动态性。下面我们将深入解析关键代码和原理。 首先，HTML部分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值