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 事件绑定问题
Jan 01 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 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获取Google AJAX Search API 数据的代码
2010/03/12 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
使用php实现截取指定长度
2013/08/06 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
javascript add event remove event
2008/04/07 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
vue实现简单的日历效果
2020/09/24 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
决策树剪枝算法的python实现方法详解
2019/09/18 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
如何定义一个可复用的服务
2014/09/30 面试题
创业者是否需要商业计划书?
2014/02/07 职场文书
面试必备的求职信
2014/05/25 职场文书
企业总经理任命书
2014/06/05 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
民主生活会汇报材料
2014/12/15 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
新闻稿标题
2015/07/18 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers