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 相关文章推荐
jQuery 页面 Mask实现代码
Jan 09 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
javascript 实现map集合
Apr 03 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
JS简单判断函数是否存在的方法
Feb 13 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 Javascript
使用原生javascript开发计算器实例代码
Feb 21 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
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
PHP 事务处理数据实现代码
2010/05/13 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
php程序内部post数据的方法
2015/03/31 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
原生js轮播特效
2017/05/18 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
Python单元测试框架unittest简明使用实例
2015/04/13 Python
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
python3.6实现学生信息管理系统
2019/02/21 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
python动态文本进度条的实例代码
2020/01/22 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
如何做好总经理助理
2013/11/12 职场文书
2014年老干部工作总结
2014/11/21 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书