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通过元素的ID和name设置样式
Jul 08 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
Vue.js一个文件对应一个组件实践
Oct 27 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
vue 项目地址去掉 #的方法
Oct 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
用PHP读取RSS feed的代码
2008/08/01 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
php获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
js 格式化时间日期函数小结
2010/03/20 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
Windows下Python3.6安装第三方模块的方法
2018/11/22 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
常用的HTML5列表标签
2017/06/20 HTML / CSS
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
音乐课外活动总结
2015/05/09 职场文书
加薪申请报告范本
2015/05/15 职场文书
ICOM R71E和R72E图文对比解说
2022/04/07 无线电
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL