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 尚未实现错误解决办法
Nov 27 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
有关Promises异步问题详解
Nov 13 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 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
各种快递查询--Api接口
2016/04/26 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
webpack4简单入门实例
2018/09/06 Javascript
Python开发编码规范
2006/09/08 Python
python 获取文件列表(或是目录例表)
2009/03/25 Python
Python实现从url中提取域名的几种方法
2014/09/26 Python
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
tensorflow更改变量的值实例
2018/07/30 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
python使用PyQt5的简单方法
2019/02/27 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
Python any()函数的使用方法
2019/10/28 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
Shein英国:女性时尚网上商店
2019/04/10 全球购物
大学生自我鉴定范文
2013/12/28 职场文书
丑小鸭教学反思
2014/02/03 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书