javascript DIV实现跟随鼠标移动


Posted in Javascript onMarch 19, 2020

本文实例为大家分享了javascript DIV实现跟随鼠标移动的具体代码,供大家参考,具体内容如下

首先介绍的是一个div跟随鼠标移动的效果,具体代码如下

javascript div跟随鼠标移动

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script type="text/javascript">
 window.onload = function () {
  var div1 = document.getElementById('div1');
  document.onmousemove = function (ev) {
  //IE支持event,firefox不支持
  var oEvent = ev || event;
  //
  var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  div1.style.top = oEvent.clientY + scrollTop + 'px'; //Y
  div1.style.left = oEvent.clientX + scrollLeft + 'px';//X
  };
 };

 </script>
</head>
<body>
 <div id="div1" style="width: 10px; height: 10px; background-color: blue; position: absolute;"></div>
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
</body>
</html>

现在为大家分享的是javascript 一串DIV跟随鼠标移动

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title></title>
 <style type="text/css">
 div {
  width: 2px;
  height: 2px;
  background-color: red;
  position: absolute;
 }
 </style>
 <script type="text/javascript">
 window.onload = function () {
  var oDivs = document.getElementsByTagName('div');
  document.onmousemove = function (ev) {
  var oEvent = ev || event;
  document.getElementsByTagName('span')[0].innerHTML = oEvent.clientY + '|' + oEvent.clientX;
  for (var i = oDivs.length-1; i > 0; i--) {
   oDivs[i].style.top = oDivs[i - 1].style.top;
   oDivs[i].style.left = oDivs[i - 1].style.left;
  }
  oDivs[0].style.top = oEvent.clientY+'px';
  oDivs[0].style.left = oEvent.clientX + 'px';
  };

 };
 </script>
</head>
<body>
 <span></span>
 <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>
 <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>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>

</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
一个无限级XML绑定跨框架菜单(For IE)
Jan 27 Javascript
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
js实现导航跟随效果
Nov 17 Javascript
vue 实现特定条件下绑定事件
Nov 09 Javascript
在Vue中使用antv的示例代码
Jun 29 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 #Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 #Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 #Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 #Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 #Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 #Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 #Javascript
You might like
php daodb插入、更新与删除数据
2009/03/19 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
jQuery each()小议
2010/03/18 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
python生成式的send()方法(详解)
2017/05/08 Python
Python 字符串与数字输出方法
2018/07/16 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
Python装饰器用法实例分析
2019/01/14 Python
pytorch 模型可视化的例子
2019/08/17 Python
Python对wav文件的重采样实例
2020/02/25 Python
python dict如何定义
2020/09/02 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
2014年党员公开承诺践诺书
2014/03/25 职场文书
出售房屋协议书范本
2014/10/06 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
工人先锋号申报材料
2014/12/29 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
推荐信范文大全
2015/03/27 职场文书
报案材料怎么写
2015/05/25 职场文书
消费者投诉书范文
2015/07/02 职场文书
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL