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 相关文章推荐
裁剪字符串trim()自定义改进版
Apr 10 Javascript
JS检测图片大小的实例
Aug 21 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
JS中常用的正则表达式
Sep 29 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
Vue波纹按钮组件制作
Apr 30 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 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通过COM使用ADODB的简单例子
2006/12/31 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
python绘制分布折线图的示例
2020/09/24 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
蔻驰法国官网:COACH法国
2018/11/14 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
小学生元旦广播稿
2014/02/21 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
二审答辩状范文
2015/05/22 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python