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 相关文章推荐
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
javascript 当前日期转化为中文的实现代码
May 13 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
js利用iframe实现选项卡效果
Aug 09 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
CocosCreator如何实现划过的位置显示纹理
Apr 14 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
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
PHP模板解析类实例
2015/07/09 PHP
js鼠标左右键 键盘值小结
2010/06/11 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
JS二分查找算法详解
2017/11/01 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
学习python的几条建议分享
2013/02/10 Python
Python中for循环详解
2014/01/17 Python
python数据结构之链表详解
2017/09/12 Python
Python编程argparse入门浅析
2018/02/07 Python
python矩阵的转置和逆转实例
2018/12/12 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
params有什么用
2016/03/01 面试题
天鹅的故事教学反思
2014/02/04 职场文书
网页美工求职信
2014/02/15 职场文书
股份转让协议书
2014/04/12 职场文书
幸福家庭标语
2014/06/27 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
《火烧云》教学反思
2016/02/23 职场文书
React Fragment介绍与使用详解
2021/11/11 Javascript