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 相关文章推荐
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
jQuery动画与特效详解
Feb 01 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 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简单静态页生成过程
2008/03/27 PHP
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
python实现简易通讯录修改版
2018/03/13 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
网吧消防安全制度
2014/01/28 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
教师个人总结范文
2015/02/11 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
开除通知书范本
2015/04/25 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫