用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

跟着鼠标移动的烟花

2012-12-03 作者: 程序猿style举报

[javascript]代码库

<script language="JavaScript">
var a_Colour='fff000';<!--第一个轨迹的颜色-->
var b_Colour='00ff00';<!--第二个轨迹的颜色-->
var c_Colour='ff00ff';<!--第三个轨迹的颜色-->
var Size=120;

var YDummy=new Array(),XDummy=new Array(),xpos=0,ypos=0,ThisStep=0;step=0.6;
document.all<!--如果是ie浏览器-->
{
function ieMouse(){
xpos = document.body.scrollLeft+event.x+6;<!--获得现在鼠标的横坐标-->
ypos = document.body.scrollTop+event.y+16;<!--获得现在鼠标的纵坐标-->
}
document.onmousemove = ieMouse;
}

function swirl(){
for (i = 0; i < 3; i++)<!--依次处理三个轨迹-->
 { 
 YDummy[i]=ypos+Size*Math.sin((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4);<!--计算得到第i个轨迹上每一点的横坐标-->
 XDummy[i]=xpos+Size*Math.cos((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4);<!--计算得到第i个轨迹上每一点的纵坐标-->
 }
ThisStep+=step;
setTimeout('swirl()',10);<!--周期性调用swirl函数-->
}

var amount=10;
if ( document.all){<!--如果是ie浏览器-->
document.write('<div id="ODiv" style="position:absolute;top:0px;left:0px">'
+'<div id="IDiv" style="position:relative">');
for (i = 0; i < amount; i++)<!--依次处理每一个点-->
{
document.write('<div id=x style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+a_Colour+';font-size:'+i/2+'"></div>');<!--第一个轨迹所在的页面-->
document.write('<div id=y style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+b_Colour+';font-size:'+i/2+'"></div>');<!--第二个轨迹所在的页面-->
document.write('<div id=z style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+c_Colour+';font-size:'+i/2+'"></div>');<!--第三个轨迹所在的页面-->
}
document.write('</div></div>');
}
function prepos(){

var msie=document.all;<!--获得ie浏览器的当前页面-->
if(document.all){<!--如果是ie浏览器-->
for (i = 0; i < amount; i++)<!--依次处理每一个点-->
{
 if (i < amount-1) <!--对于前amount-1个点-->
 {
 msie.x[i].style.top=msie.x[i+1].style.top;msie.x[i].style.left=msie.x[i+1].style.left;<!--更新第一个轨迹上各个点上的上边界和左边界-->
 msie.y[i].style.top=msie.y[i+1].style.top;msie.y[i].style.left=msie.y[i+1].style.left;<!--更新第二个轨迹上各个点上的上边界和左边界-->
 msie.z[i].style.top=msie.z[i+1].style.top;msie.z[i].style.left=msie.z[i+1].style.left;<!--更新第三个轨迹上各个点上的上边界和左边界-->
 } 
else 
 {
 msie.x[i].style.top=YDummy[0];msie.x[i].style.left=XDummy[0];<!--更新第一个轨迹上最后一个点上的上边界和左边界-->
 msie.y[i].style.top=YDummy[1];msie.y[i].style.left=XDummy[1];<!--更新第二个轨迹上最后一个点上的上边界和左边界-->
 msie.z[i].style.top=YDummy[2];msie.z[i].style.left=XDummy[2];<!--更新第三个轨迹上最后一个点上的上边界和左边界-->
 }
}
}
setTimeout("prepos()",10);<!--周期性调用prepos函数-->
}
function Start(){<!--开始函数-->
swirl(),prepos()<!--依次调用swirl和prepos函数-->
}
window.onload=Start;<!--调用start函数-->

</script>

<!--本例程实现了跟着鼠标的烟花的效果-->
<!--对确定的动画轨迹的实现方法-->
<!--程序对不同浏览器的支持-->
<!--动画的实现方法-->


网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...