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 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
js预加载图片方法汇总
Jun 15 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
js实现京东轮播图效果
Jun 30 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
简单谈谈python中的语句和语法
2017/08/10 Python
关于python的list相关知识(推荐)
2017/08/30 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
详解python多线程之间的同步(一)
2019/04/03 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
Java基础知识面试要点
2016/07/29 面试题
大学生的应聘自我评价
2013/12/13 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
导游词之桂林山水
2019/09/20 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
详解Redis主从复制实践
2021/05/19 Redis