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

本文实例讲述了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程序设计有所帮助。

时间: 2024-08-01 18:44:25

JS实现跟随鼠标闪烁转动色块的方法_javascript技巧的相关文章

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

 这篇文章主要介绍了JS实现跟随鼠标闪烁转动色块的方法,涉及javascript操作html元素及css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS实现跟随鼠标闪烁转动色块的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <head> <title>JS跟随鼠标闪烁转动的色块</title> </head> <body> <script language=&qu

JS实现跟随鼠标立体翻转图片的方法_javascript技巧

本文实例讲述了JS实现跟随鼠标立体翻转图片的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Wanna tell her - interactive DHTML</title> <

js实现文字跟随鼠标移动而移动的方法_javascript技巧

本文实例讲述了js实现文字跟随鼠标移动而移动的方法.分享给大家供大家参考.具体分析如下: 这是一款非常简单的鼠标特性代码,在网页中移动鼠标的时候,后面跟着一串文字跟随者鼠标移动 复制代码 代码如下: <html> <head> <style type="text/css"> .spanstyle { COLOR: 000000; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY:

js实现感应鼠标图片透明度变化的方法_javascript技巧

本文实例讲述了js实现感应鼠标图片透明度变化的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>感应鼠标图片透明度变化</title> <SCRIPT language="JavaScript"> <!-- function makevisible(cur,which){ if (which==0) cur.filters.alpha.opacity=100

js实现网页标题栏闪烁提示效果实例分析_javascript技巧

本文实例讲述了js实现网页标题栏闪烁提示效果的方法.分享给大家供大家参考.具体分析如下: 网页标题栏闪烁效果我们在一些聊天工具会常看到,像现在流量的聊天室,下面我们就来给大家总结一款实现网页标题栏闪烁提示代码,感兴趣可参考一下. 公司的项目中用到了这个新消息提示的效果,主要用于提示用户有新消息.具体实现代码如下: 复制代码 代码如下: var newMessageRemind={ _step: 0, _title: document.title, _timer: null, //显示新消息提示

JS实现在线统计一个页面内鼠标点击次数的方法_javascript技巧

本文实例讲述了JS实现在线统计一个页面内鼠标点击次数的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

js实现同一个页面多个渐变效果的方法_javascript技巧

本文实例讲述了js实现同一个页面多个渐变效果的方法.分享给大家供大家参考.具体分析如下: 这里可实现5个元素中随便一个,鼠标移上去透明度渐渐增加,鼠标移出,透明度渐渐减小的效果. 要点一: var speed = 0; if(target>obj.alpha){ speed = 5; }else{ speed = -5; } 根据目标值和当时值的对比,来决定是正向还是负向速度. 要点二: for(i=0; i<runs_li.length; i++){ runs_li[i].timer = n

JS选项卡动态替换banner图片路径的方法_javascript技巧

本文实例讲述了JS选项卡动态替换banner图片路径的方法.分享给大家供大家参考.具体分析如下: 这里演示一个选项卡演示如何动态替换图片的方法,用一个JS函数实现的定义鼠标滑过替换图片的路径. 参数说明如下: obj 当前触发事件的对象 hc 当前选中元素的类名 content 选择需要替换路径的图片 url 为图片的路径 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http

js+html5实现canvas绘制简单矩形的方法_javascript技巧

本文实例讲述了js+html5实现canvas绘制简单矩形的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not sup