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动态插入script的基本思路及实现函数
Nov 11 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
简单实现js拖拽效果
Jul 25 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
微信小程序获取当前时间及星期几的实例代码
Sep 20 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
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
PHP文件与目录操作示例
2016/12/24 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
详解js类型判断
2018/05/22 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
python3学生名片管理v2.0版
2018/11/29 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
python 日期排序的实例代码
2019/07/11 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
pytorch之添加BN的实现
2020/01/06 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
先进党组织事迹材料
2014/12/26 职场文书
幼儿园感谢信
2015/01/21 职场文书
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
python如何将mat文件转为png
2022/07/15 Python
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技