js实现飞入星星特效代码


Posted in Javascript onOctober 17, 2014

本文实例讲述了js实现飞入星星特效代码,分享给大家供大家参考。

具体实现代码如下:

<html>

<head>

<title>星空极速飞入效果</title>

<style type="text/css">

<!--

body {

background-color: #000066;

}

-->

</style>

</head>

<body>

<script language="JavaScript">

xL=8;

xH=xW=xR=xE=xMY=xMX=xWd=xHd=0;

xF=new Array();

xY=new Array();

xX=new Array();

xS=new Array();

xA=new Array();

xB=new Array();

ini=new Array();

document.write('<div id="sdiv" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < xL; i++){

 document.write('<div id="div" style="position:absolute;top:0;left:0;width:5px;height:5px;'+'font-size:10px;color:#ffffff">.</div>');

}

document.write('</div></div>');

function Set(){

 for (i=0; i < xL; i++){

  transfer(i)

  xF[i]=xW/14;

 }

}

function Assign(){

 sdiv.style.top=document.body.scrollTop;

 for (i=0; i < xL; i++){

  xF[i]-=xS[i]*25;

  if (xF[i] < 4) xF[i]=3;

  div[i].style.top =xY[i];

  div[i].style.left=xX[i];

  div[i].style.fontSize=xF[i];

 }

}

function fly(){

 xMY=window.document.body.clientHeight/2;

 xMX=window.document.body.clientWidth/2;

 xWd=Math.round(Math.random()*40+5);

 xHd=Math.round(Math.random()*30+5);

 for (i=0; i < xL; i++){

  xY[i]=xA[i]+=(xMY-xA[i])*(xS[i]);

  xX[i]=xB[i]+=(xMX-xB[i])*(xS[i]);

  if ((xX[i] > xMX-xWd) && (xX[i] < xMX+xWd) && (xY[i] > xMY-xHd) && (xY[i] < xMY+xHd)){

   transfer(i)

  }

  if ((xX[i]<0)||(xX[i]>xW)||(xY[i]<0)||(xY[i]>xH)){

    xF[i]=xW/14;

  }

 }

 Assign();

 setTimeout('fly()',1);

}

function transfer(i){

 xH=window.document.body.offsetHeight;

 xW=window.document.body.offsetWidth;

 xA[i]=Math.round(Math.random()*xH);

 xB[i]=Math.round(Math.random()*xW);

 xS[i]=Math.random()*0.05+0.05;

 xR=Math.round(Math.random()*3);

 xE=Math.round(Math.random()*50+50);

 if (xR == 3) xB[i]=-xE;

 if (xR == 2) xB[i]=xW+xE;

 if (xR == 1) xA[i]=-xE;

 if (xR == 0) xA[i]=xH;

}

Set();

fly();

</script>

</body>

</html></td>

   </tr>

 </table>

希望本文所述对大家的javascript程序设计有所帮助

Javascript 相关文章推荐
javascript AutoScroller 函数类
May 29 Javascript
jquery插件之easing 动态菜单
Aug 21 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
jQuery实现验证码功能
Mar 17 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
JS学习笔记之数组去重实现方法小结
May 29 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 #Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 #Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 #Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 #Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 #Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 #Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 #Javascript
You might like
浅析PHP文件下载原理
2014/12/25 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
jQuery聚合函数实例
2015/05/21 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
react基本安装与测试示例
2020/04/27 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
Python匹配中文的正则表达式
2016/05/11 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
Django Rest framework频率原理与限制
2019/07/26 Python
python urllib和urllib3知识点总结
2021/02/08 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
EJB的角色和三个对象
2015/12/31 面试题
网络工程师的自我评价
2013/10/02 职场文书
经贸日语毕业生自荐信
2013/11/03 职场文书
2013的个人自我评价
2013/12/26 职场文书
员工工作表扬信范文
2014/01/13 职场文书
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
视光学专业自荐信
2014/06/24 职场文书
学校周年庆活动方案
2014/08/22 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
学术会议通知
2015/04/15 职场文书