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 原型与继承说明
Jun 09 Javascript
javascript 单例/单体模式(Singleton)
Apr 07 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
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之第七天
2006/10/09 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
可输入的下拉框
2006/06/19 Javascript
JS 判断代码全收集
2009/04/28 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
Vue组件系列开发之模态框
2019/04/18 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
python实现简易云音乐播放器
2018/01/04 Python
python实现俄罗斯方块
2018/06/26 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
python类的实例化问题解决
2019/08/31 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
基于python实现雪花算法过程详解
2019/11/16 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
20岁生日感言
2014/01/13 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
社会实践活动总结
2015/02/05 职场文书
实习单位意见
2015/06/04 职场文书
欠条样本
2015/07/03 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android
AngularJS实现多级下拉框
2022/03/25 Javascript