当前位置: 首页 > 编程笔记 >

js实现飞入星星特效代码

公孙阳文
2023-03-14
本文向大家介绍js实现飞入星星特效代码,包括了js实现飞入星星特效代码的使用技巧和注意事项,需要的朋友参考一下

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

 类似资料:
  • 本文向大家介绍JS实现星星海特效,包括了JS实现星星海特效的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JS实现星星海特效的具体代码,供大家参考,具体内容如下 知识点 1.CSS使用@keyframes自定义动画,使用animation调用自定义动画 2.opacity 透明度。从 0.0 (完全透明)到 1.0(完全不透明) 3.CSS中transform 4.animation

  • 本文向大家介绍js实现漫天星星效果,包括了js实现漫天星星效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了漫天小星星效果的实现代码,供大家参考,具体内容如下 效果图: 实现代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍javascript实现随机显示星星特效,包括了javascript实现随机显示星星特效的使用技巧和注意事项,需要的朋友参考一下 本文实例讲解了javascript实现随机显示星星特效的详细代码,具体内容如下 (1)网页背景是黑的  (2)星星随机大小:min=15,max=80  (3)星星的坐标是随机的:               x_left=0,x_right=(浏览器宽-

  • 本文向大家介绍js实现商城星星评分的效果,包括了js实现商城星星评分的效果的使用技巧和注意事项,需要的朋友参考一下 在这里和朋友们分享一个使用js实现商城星星评分的效果,希望能给大家点帮助,当然更好的特效还有待大家完善。 html如下: css样式: 最后js调用如下: 以上就是本文的全部内容,希望对大家的学习jquery程序设计有所帮助。

  • 本文向大家介绍JS实现星星评分功能实例代码(两种方法),包括了JS实现星星评分功能实例代码(两种方法)的使用技巧和注意事项,需要的朋友参考一下 一、方法1 1、用到图片 2、结构和样式 li加了light的class就会变成亮星,就是换了背景位置,把空心的星星变成了实心的。所以js实现的时候点亮就是给li加一个light的类名。 效果: 3、交互js 这样设计的一个关键点在于,mouout时保存一

  • 本文向大家介绍jQuery基于ajax实现星星评论代码,包括了jQuery基于ajax实现星星评论代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery基于ajax实现星星评论代码。分享给大家供大家参考。具体如下: 这里使用jquery模仿点评网的星星评论功能,Ajax评论模块,鼠标点击星星即可评价,下边是分数,可以点击后给分,网上很流行的效果,本代码相对完整,相信很多朋友会喜欢