JS实现跟随鼠标闪烁转动色块的方法


Posted in Javascript onFebruary 26, 2015

本文实例讲述了JS实现跟随鼠标闪烁转动色块的方法。分享给大家供大家参考。具体实现方法如下:

<html>

<head>

<title>JS跟随鼠标闪烁转动的色块</title>

</head>

<body>

<script language="JavaScript">

<!-- 

if (document.all){ 

colours=new Array('ff0000','00ff00','3366ff','ff00ff','ffa500','ffffff','fff000')

amount=colours.length;

YgetDelay=0,XgetDelay=0,Ydelay=0,Xdelay=0,step=0.2,currStep=0,my=0,mx=0;

document.write('<div id="ie" style="position:absolute;top:0;left:0;"><div style="position:relative">');

for (i=0; i < amount; i++)

document.write('<div id="iestars" style="position:absolute;top:0px;left:0px;height:50px;width:50px;font-family:Courier New;font-size:5px;color:'+colours[i]+';padding-top:20px;text-align:center">.</div>');

document.write('</div></div>');

ini=1;

gstep=1;

function iMouse(){

my=event.y;mx=event.x;

}

document.onmousemove=iMouse

function dim(){

ini-=gstep;

dt=setTimeout('dim()',10);

if (ini < 2){

clearTimeout(dt);

glow();

}

}

function glow(){

ini+=gstep;

gt=setTimeout('glow()',10);

if (ini > 14){

clearTimeout(gt);

dim();

}

}

function stars(){

ie.style.top=document.body.scrollTop;

for (i=0; i < amount; i++)

 {

 var layer=iestars[i].style; 

 layer.filter='glow(color='+colours[i]+', strength='+ini+')';

 layer.top= Ydelay+100*Math.sin((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10); 

 layer.left=Xdelay+180*Math.cos((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10);

 }

currStep+=step;

}

function delay(){

Ydelay = YgetDelay+=(my-YgetDelay)*1/20;

Xdelay = XgetDelay+=(mx-XgetDelay)*1/20;

stars();

setTimeout('delay()',10);

}

delay();

glow();

}

//-->

</script>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Javascript 类与静态类的实现
Apr 01 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
vue.js中$set与数组更新方法
Mar 08 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 #Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 #Javascript
js随机生成网页背景颜色的方法
Feb 26 #Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 #Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 #Javascript
jQuery对象初始化的传参方式
Feb 26 #Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 #Javascript
You might like
十天学会php之第六天
2006/10/09 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
Python常用列表数据结构小结
2014/08/06 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
Python进行统计建模
2020/08/10 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
Python使用openpyxl复制整张sheet
2021/03/24 Python
大学自我鉴定范文
2013/12/26 职场文书
十佳班主任事迹材料
2014/01/18 职场文书
三八节主持词
2014/03/17 职场文书
建筑横幅标语
2014/10/09 职场文书
团组织推优材料
2014/12/29 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL