鼠标移动事件（跟随鼠标移动的div）

最新推荐文章于 2024-07-12 16:42:46 发布
最新推荐文章于 2024-07-12 16:42:46 发布
阅读量107 收藏
点赞数
文章标签： json
原文链接：http://www.cnblogs.com/youcandomore/p/6708533.html
版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 10px;
height: 10px;
margin: 5px;
position: absolute;
}
</style>
<script>
function getPos(ev){
var rollTop = document.documentElement.scrollTop || document.body.scrollTop;
var rollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

//返回一个Json
return {x: ev.clientX + rollLeft , y: ev.clientY + rollTop};
}
document.onmousemove = function(ev){
var allDiv = document.getElementsByTagName('div');
var oEvent = ev||event;
var pos = getPos(oEvent);


for(var i=allDiv.length-1;i>0;i--){
//后一个div的位置等于前一个div的位置
allDiv[i].style.left = allDiv[i-1].offsetLeft + 'px';
allDiv[i].style.top = allDiv[i-1].offsetTop + 'px';
}

//将第一个div左边设置为鼠标的位置
allDiv[0].style.left = pos.x + 'px';
allDiv[0].style.top = pos.y + 'px';
};

</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div>L</div>
<div>o</div>
<div>v</div>
<div>e</div>
<div></div>
<div>h</div>
<div></div>
<div>u</div>
<div></div>
<div>x</div>
<div></div>
<div>i</div>
<div></div>
<div>a</div>
<div></div>
<div>o</div>
<div></div>
<div>w</div>
<div></div>
<div>e</div>
<div></div>
<div>n</div>
<div></div>
<div>h</div>
<div></div>
<div>u</div>
<div></div>
<div>x</div>
<div></div>
<div>i</div>
<div></div>
<div>a</div>
<div></div>
<div>o</div>
<div></div>
<div>w</div>
<div></div>
<div>e</div>
<div></div>
<div>n</div>
<div></div>

</body>
</html>

 

转载于:https://www.cnblogs.com/youcandomore/p/6708533.html

weixin_30642561
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js跟随鼠标hover效果
qq_36454089的博客
05-29 559
<!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> * { margin: 0; p.
javascript DIV跟随鼠标移动
10-22
JavaScript中的DIV跟随鼠标移动是一种常见的动态效果，常用于创建交互式网页。这个效果可以通过监听鼠标的移动事件并更新DIV的位置来实现。以下是对这个技术的详细解析： 首先，我们需要一个HTML结构，包含一个或者...
鼠标跟随事件
weixin_48387470的博客
06-28 91
鼠标跟随事件
div跟随鼠标移动
xiaoxingxingzai的博客
11-07 417
一.先了解元素与鼠标的坐标原点都是谁
div跟随鼠标实现效果
cjFrontEnd的博客
04-12 364
实现思路：div脱离文档流,设置为固定定位： position: fixed; left: Number(event.clientX - event.offsetX + ‘偏移常量’)； top: Number(event.clientY- event.offsetY+ ‘偏移常量’)； 如果div位置过低： if（top值> (window.innerHeight -...
超陋的小方块移动小游戏（鼠标触碰小方块，小方块会沿其他三个方向逃避鼠标的触碰）
weixin_46102597的博客
05-30 1936
超陋的代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实现小方块随机移动小游戏</title> <style> *{
jQuery实现div跟随鼠标移动
10-19
主要为大家详细介绍了jQuery实现div跟随鼠标移动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现跟随鼠标移动的小球
10-16
本文将深入解析如何使用JavaScript实现一个跟随鼠标移动的小球效果。 首先，让我们分析提供的代码。这段代码包含HTML、CSS和JavaScript三部分，创建了两个小球（红色和绿色），它们分别位于两个具有边框的方框内，...
js实现图片放大并跟随鼠标移动特效
10-17
总的来说，实现图片跟随鼠标移动并放大的JavaScript特效涉及到JavaScript事件处理、DOM操作以及CSS样式控制。这个特效的实现既提高了用户的交互体验，又展示了JavaScript在网页动态效果方面的强大能力。在实际项目中...
Python+turtle交互式绘图：可以用鼠标拖动的小海龟
董付国的Python专栏
09-30 1091
功能描述：代码运行后，在窗口上显示3个小海龟，使用鼠标拖动小海龟时可以动态改变窗口颜色，如下图所示。说明：本例代码主体部分来自turtle Demo，我稍微修改了一下，重点增加了注释，方便...
PYTHON 游戏项目：从记忆翻牌游戏中谈turtle库中onscreenclick()和onclick()函数
weixin_45678405的博客
06-22 4603
PYTHON 游戏项目：记忆翻牌游戏 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示； 全新的 KaTeX数学公式 语法； 增加了支持甘特图的mermaid语法1 功能； 增加了 多屏幕编辑 Mar
map 鼠标移动事件 mouse-move 获取当前鼠标的经纬度
josiecici的博客
04-22 1234
**注意 后面的函数要这样写 (e)=>{} 不能写成 function（e）{} 因为this指向问题 ** 箭头函数：出现的作用除了让函数的书写变得很简洁，可读性很好外；最大的优点是解决了this执行环境所造成的一些问题。比如：解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval中使用this所造成的问题。 普通函数...
让一个div块随鼠标移动
zwt_1的博客
07-20 2925
一个简单的小练习，实现当鼠标移动时，div块跟随鼠标的移动而移动，需要注意的是只有开启div的定位，div才会移动 onmousemove：鼠标移动事件 clientX和clientY：获取鼠标在当前可见窗口的坐标 scrollTop：垂直滚动条滚动的距离 scrollLeft：水平滚动条滚动的距离 -  在chrome中，scrollTop和scrollLeft是body的属性，而在火...
Js实现div跟着鼠标的移动
热门推荐
ahty的专栏
08-03 1万+
html> html lang="en"> head> meta charset="UTF-8"> title>title> style> img{ position: absolute; left: 0; top: 0; } sty
JS小练习之鼠标事件——让物体跟随鼠标移动
weixin_41586886的博客
06-14 3597
&lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;鼠标事件&lt;/title&gt; &lt;style&gt; #div1{
div跟随鼠标
从盲流子到程序员
12-15 548
#div1 { width: 100px; height: 100px; background: red; position: absolute; } &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body style="height:2000px"&gt; &lt;div id="div1"&gt;&lt;/div&a
Python应用爬虫下载QQ音乐歌曲！
最新发布
Python_trys的博客
07-12 1231
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970。
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 245
原生WebSocket： new WebSocket。
fastjson 如何忽略@type类型解析
01世界的博客
07-10 321
但是在自己实现的过程中发现一个问题Java.lang.ClassCastException: class com.alibaba.fastjson.JSONObject cannot be cast to class。FASTJSON支持AutoType功能，这个功能会在序列化的JSON字符串中带上类型信息，在反序列化时，不需要传入类型，实现自动类型识别。这是因为在序列化是 FastJSON会向redis填充@Type类型，反序列化时，无法根据Type类型值转化为对应的类，导致报错。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值