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 相关文章推荐
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
JavaScript数组操作详解
Feb 04 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 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操作xml
2013/10/27 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
vue之延时刷新实例
2019/11/14 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
python中实现php的var_dump函数功能
2015/01/21 Python
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
wxPython多个窗口的基本结构
2019/11/19 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
垃圾回收的优点和原理
2014/05/16 面试题
《赵州桥》教学反思
2014/02/17 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
文明礼仪标语
2014/06/13 职场文书
安全保证书怎么写
2015/02/28 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
关于Redis的主从复制及哨兵问题
2022/06/16 Redis