当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 随鼠标的闪烁小星星

HTML/XHTML教程
CSS样式表设计的十条技巧
什么样的界面算是好界面-7个案例
CSS+JS实现的选项卡效果
用CSS设计高体验的表单显示效果示例
利用css和js实现firefox和IE都支持的页面局部打印
针对各种版本的浏览器隐藏CSS的九大技巧
Div+CSS布局入门教程
在DIV+CSS排版中新闻列表的制作方法
实践DIV+CSS网页布局入门指南
HTML中meta详解
有关HTML代码的另类应用技巧
彻底弄懂CSS盒子模式(DIV布局)
页面制作人员的修练之道
注意:HTML文件也能格式化硬盘
小技巧:让广告代码不再影响你的网页加载速度
进阶:彻底弄懂CSS盒子模式之二
彻底弄懂CSS盒子模式之三
详解css定位与定位应用
ASP生成静态Html文件技术杂谈
CSS的倡导者:学习CSS的10大理由

HTML/XHTML教程 中的 随鼠标的闪烁小星星


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 59 ::
收藏到网摘: n/a

把如下代码加入<body>区域中
<script language="JavaScript">
<!--
colours=new Array('#ffffff','#ff0000','#00ff00','#ffffff','#ff00ff','#ffa500','#fff000','#0000ff','#ffffff')

y = 0;
x = 0;
n6=(document.getElementById&&!document.all);
ns=(document.layers);
ie=(document.all);
d=(ns||ie)?'document.':'document.getElementById("';
a=(ns||n6)?'':'all.';
n6r=(n6)?'")':'';
s=(ns)?'':'.style';
n=(n6)?9:10;
if (ns){
for (i = 0; i < n; i++)
document.write('<layer name="dots'+i+'" top=0 left=0 width='+i/2+' height='+i/2+' bgcolor=#ff0000></layer>');
}
if (ie)
document.write('<div id="con" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
if (ie||n6){
for (i = 0; i < n; i++)
document.write('<div id="dots'+i+'" style="position:absolute;top:0px;left:0px;width:'+i/2+'px;height:'+i/2+'px;background:#ff0000;font-size:'+i/2+'"></div>');
}
if (ie)
document.write('</div></div>');

 


(ns||n6)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
y = (ns||n6)?evnt.pageY+4 - window.pageYOffset:event.y+4;
x = (ns||n6)?evnt.pageX+1:event.x+1;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;

function animate(){
h=(ns||n6)?window.innerHeight:document.body.clientHeight;
w=(ns||n6)?window.innerWidth:document.body.clientWidth;

o=(ns||n6)?window.pageYOffset:0;
if (ie)con.style.top=document.body.scrollTop;
for (i = 0; i < n; i++){
var temp1 = eval(d+a+"dots"+i+n6r+s);
var randcolours = Math.floor(Math.random()*colours.length);
(ns)?temp1.bgColor = colours[randcolours]:temp1.background = colours[randcolours];
if (i < n-1){
 var temp2 = eval(d+a+"dots"+(i+1)+n6r+s);
 temp1.top = parseInt(temp2.top);
 temp1.left = parseInt(temp2.left);
 }
else{
 temp1.top = y+o;
 temp1.left = x;
 }
if ((y < h/10) || (y > h-h/10) || (x < w/10) || (x > w-w/10)){
var temp3 = eval(d+a+"dots"+0+n6r+s);
temp3.top = (y-25)+Math.random()*50;
temp3.left = (x-25)+Math.random()*50;
temp2.top = parseInt(temp3.top)+o;
temp2.left = parseInt(temp3.left);
}
}
setTimeout("animate()",30);
}
animate();
// -->
</script>