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 setattribute批量设置css样式
Nov 26 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
js闭包实例汇总
Nov 09 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
js模拟实现烟花特效
Mar 10 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
JS轮播图的实现方法
Aug 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
第一个无线电台是由谁发明的
2021/03/01 无线电
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
php中chdir()函数用法实例
2014/11/13 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
PHP实现图片压缩
2020/09/09 PHP
jquery 指南/入门基础
2007/11/30 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
webpack之devtool详解
2018/02/10 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
python动态加载变量示例分享
2014/02/17 Python
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
python flask实现分页效果
2017/06/27 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
详解python tkinter模块安装过程
2020/01/06 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
父亲生日宴会答谢词
2014/01/10 职场文书
致1500米运动员广播稿
2014/02/07 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
离婚民事起诉状
2015/08/03 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python
frg-100简单操作(设置)说明
2022/04/05 无线电