JS实现的简单鼠标跟随DiV层效果完整实例


Posted in Javascript onOctober 31, 2015

本文实例讲述了JS实现的简单鼠标跟随DiV层效果。分享给大家供大家参考,具体如下:

这段代码呈现一串跟随鼠标的Div效果,并有拖影特效,随着鼠标快速的晃动,Div层效果会不断的增加,后面的Div会自动消失,不过还有些Bug,期待与大家完善这个JS特效。

运行效果截图如下:

JS实现的简单鼠标跟随DiV层效果完整实例

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div {width:10px; height:10px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>跟随鼠标的Div效果</title>
<script>
window.onload=function ()
{
 var aDiv=document.getElementsByTagName('div');
 var i=0;
 setInterval(function(){
  for(i=aDiv.length-1;i>0;i--)
  {
   aDiv[i].style.left=aDiv[i-1].style.left;
   aDiv[i].style.top=aDiv[i-1].style.top;
  }
  },5);
 document.onmousemove=function (ev)
 {
  var oEvent=ev||event;
  aDiv[0].style.left=oEvent.clientX+'px';
  aDiv[0].style.top=oEvent.clientY+'px';
 };
};
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<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 相关文章推荐
javascript CSS画图之基础篇
Jul 29 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
详解vuex commit保存数据技巧
Dec 25 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
js实现点击获取验证码倒计时效果
Jan 28 #Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 #Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 #Javascript
jQuery+Ajax实现无刷新分页
Oct 30 #Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 #Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 #Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 #Javascript
You might like
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
jquery中radio checked问题
2015/03/16 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
JavaScript中变量提升与函数提升经典实例分析
2018/07/26 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
python原始套接字编程示例分享
2014/02/21 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
python+opencv实现阈值分割
2018/12/26 Python
Python assert关键字原理及实例解析
2019/12/13 Python
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
美术毕业生求职信
2014/02/25 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
yy婚礼主持词
2014/03/14 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
社团活动总结书
2014/06/27 职场文书
战友聚会致辞
2015/07/28 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL