js实现飞入星星特效代码_javascript技巧

本文实例讲述了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程序设计有所帮助

时间: 2024-11-05 12:35:29

js实现飞入星星特效代码_javascript技巧的相关文章

JS实现转动随机数抽奖的特效代码_javascript技巧

大家都玩过抽奖游戏,或者梦想抽到大奖吧,但是有没有想过抽奖游戏是怎么实现的呐?今天就给大家分享一款转动随机数抽奖的JS特效代码. 实现代码如下 <!Doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <script src="http://code.jquery.com

js实现匹配时换色的输入提示特效代码_javascript技巧

本文实例讲述了js实现匹配时换色的输入提示特效代码.分享给大家供大家参考.具体如下: 这是一款js输入提示特效,当你在输入框中输入字母时,如果下边列出的类别中有与你字母相匹配的,那么这些内容将会变成红色,着重显示出来,与输入框下拉提示是基本是一样的,只是换了一个方式. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tips-cha-color-codes/ 具体代码如下: <html> <head> <meta htt

JS实现从顶部下拉显示的带动画QQ客服特效代码_javascript技巧

本文实例讲述了JS实现从顶部下拉显示的带动画QQ客服特效代码.分享给大家供大家参考,具体如下: 这是一款动画版QQ在线客服代码,从网页顶部下拉出来的QQ客服,下滑结束后有弹性缓冲效果.在世界地图的映衬下,似乎一下子上升了品位.动画效果是由jq实现的,QQ客服的一些信息自己修改下,换成你自己的QQ,上传到网页就可用啦.注:在火狐台chrome浏览器中测试效果会更好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-top-show-down-

JS实现来回出现文字的状态栏特效代码_javascript技巧

本文实例讲述了JS实现来回出现文字的状态栏特效代码.分享给大家供大家参考,具体如下: 运行这款来回出现文字的状态栏特效时,请注意页面左下角的状态栏.貌似IE8以上版本看不到效果唉.那么究竟是如何实现的呢?主要是用函数来显示消息,根据place的值取当前需显示的字符串,准备在300毫秒后收起显示,将需取的字符串长度计数器加一准备下一次显示:同时使用函数隐藏消息,取Message右边的一定长度的字符串,设定消隐下一个字符的延时. 运行效果截图如下: 在线演示地址如下: http://demo.jb5

jQuery右下角旋转环状菜单特效代码_javascript技巧

jquery实现右下角旋转环形菜单特效代码,是固定在页面右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css制作动画效果. 效果图如下: 在线预览    点击下载 html代码: <div class="htmleaf-container"> <div id='ss_menu'> <div> <i class="fa fa-qq"></i> </div>

JS实现弹性菜单效果代码_javascript技巧

本文实例讲述了JS实现弹性菜单效果代码.分享给大家供大家参考.具体如下: 这是一款JavaScript+CSS实现弹性菜单--纯属自己写着练习,无使用第三方的类库,我觉得是值得学习前端设计的朋友参考的,有兴趣的朋友可以把弹性的菜单背景换成一个漂亮的图片,这样更漂亮了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tx-move-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//

JavaScript实现的简单烟花特效代码_javascript技巧

本文实例讲述了JavaScript实现的简单烟花特效代码.分享给大家供大家参考,具体如下: 这是一款JavaScript烟花特效,过年的时候放到你的网页上祝贺大家牛年大吉吧,是不是很不错? 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-yh-explode-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

JavaScript实现垂直向上无缝滚动特效代码_javascript技巧

一.循环向上滚动的文字,如上面的滚动效果 二.实现的思路 1.建立三个层dome.dome1.dome2 2.垂直滚动的文字在dome1上 3.通过层的滚动来实现文字滚动 三.源代码 <html> <head> <title>循环向上滚动的文字</title> <link href="css/scrollTop.css" rel="stylesheet" type="text/css" /&g

完美的js div拖拽实例代码_javascript技巧

本文实例为大家分享了完美的js div拖拽实例代码,供大家参考,具体内容如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head