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奇异的arguments分析
Oct 20 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
js中function()使用方法
Dec 24 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
深入分析javascript中console命令
Aug 14 Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 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
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
python迭代器的使用方法实例
2013/11/21 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
python简单操作excle的方法
2018/09/12 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
Python urllib3软件包的使用说明
2020/11/18 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
《童年》教学反思
2014/02/18 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
安全先进个人材料
2014/12/29 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
《小小的船》教学反思
2016/02/18 职场文书
如何用python插入独创性声明
2021/03/31 Python