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 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
Javascript 面向对象之重载
May 04 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 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
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
Python实现删除文件但保留指定文件
2015/06/21 Python
python文件名和文件路径操作实例
2017/09/29 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
python负载均衡的简单实现方法
2018/02/04 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
创业计划书之个人工作室
2019/08/22 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers
SQL基础的查询语句
2021/11/11 MySQL