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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
javascript 函数使用说明
Apr 07 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
详解vue axios中文文档
Sep 12 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
JS实现动态无缝轮播
Jan 11 Javascript
vue 动态生成拓扑图的示例
Jan 03 Vue.js
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多线程下载远程多个文件
2013/06/25 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
PHP中16个高危函数整理
2019/09/19 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
pandas值替换方法
2018/07/10 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
简单了解Python3里的一些新特性
2019/07/13 Python
python调用其他文件函数或类的示例
2019/07/16 Python
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
GWT都有什么特性
2016/12/02 面试题
室内设计专业学生的自我评价分享
2013/11/27 职场文书
大专生的学习自我评价
2013/12/04 职场文书
计算机专业自荐信
2014/05/24 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
杭白菊导游词
2015/02/10 职场文书
2015年电工工作总结
2015/04/10 职场文书
人事任命通知
2015/04/20 职场文书
电影建党伟业观后感
2015/06/01 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书