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 相关文章推荐
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
extjs 04_grid 单击事件新发现
Nov 27 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
JavaScript如何操作css
Oct 24 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 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防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
Python版的文曲星猜数字游戏代码
2013/09/02 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
python 多进程队列数据处理详解
2019/12/23 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
python字符串下标与切片及使用方法
2020/02/13 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
学生吸烟检讨书
2014/09/14 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
在人间读书笔记
2015/06/30 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
Python多线程 Queue 模块常见用法
2021/07/04 Python
redis缓存存储Session原理机制
2021/11/20 Redis
java中如何截取字符串最后一位
2022/07/07 Java/Android