基于JavaScript实现飘落星星特效

2024-11-28 18:10:27

本文实例为大家分享了js飘落星星特效的具体代码，供大家参考，具体内容如下

1.效果图

2.代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  img{
   position: absolute;
  }
  body { 

   background-image: url(img/bg.jpg);
   background-size: 100%; 

  }
 </style> 

 <script> 

  function Star() { 

   this.speed=10;
   this.img=new Image();
   this.img.src="img/star"+parseInt(Math.random()*4+1)+".png";
   this.img.style.width=50+'px';
   this.img.style.height=50+'px';
   this.img.style.top=Math.random()*window.innerHeight+1+'px';
   this.img.style.left=Math.random()*window.innerWidth+1+'px';
   document.body.appendChild(this.img);
  } 

  Star.prototype.slip=function () { 

   var that=this;
   function move() {
    that.img.style.top=that.img.offsetTop+that.speed+'px';
    console.log(that.img.offsetTop+"star");
    console.log(window.innerHeight+"window");
    if(that.img.offsetTop>window.innerHeight){
     clearInterval(sh);
     that.img.style.height=0;
     that.img.style.width=0;
    }
   }
   var sh=setInterval(move,100);
  } 

   setInterval(function () {
    for(var i=1;i<5;i++){
    new Star().slip();
    }
   },1000) 

 </script> 

</head> 

<body> 

</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

javascript实现随机显示星星特效

本文实例讲解了javascript实现随机显示星星特效的详细代码,具体内容如下 (1)网页背景是黑的 (2)星星随机大小:min=15,max=80 (3)星星的坐标是随机的: x_left=0,x_right=(浏览器宽-星星宽) y_top=0,y_bottom=? (4)单击某个星星,星星消失 (5)网页加载完成,开始显示星星 (6)定时器:每隔一个周期,插入一个星星 <html> <head> <meta h
js实现漫天星星效果

本文实例为大家分享了漫天小星星效果的实现代码,供大家参考,具体内容如下效果图: 实现代码: <html onclick="init(event)"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script ty
js实现飞入星星特效代码

本文实例讲述了js实现飞入星星特效代码,分享给大家供大家参考. 具体实现代码如下: 复制代码代码如下: <html> <head> <title>星空极速飞入效果</title> <style type="text/css">  </style> </head> <body> <scr
基于JavaScript实现飘落星星特效

本文实例为大家分享了js飘落星星特效的具体代码,供大家参考,具体内容如下 1.效果图 2.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img{ position: absolute; } body { background-image: u
基于JavaScript实现新年贺卡特效

目录动图演示主要代码 css样式 Javascirpt 动图演示一款超级炫酷的2022新年快乐html网页特效,霓虹的城市夜景和绚烂的烟花很是特别,该html页面还有交互效果,点击鼠标就会呈现烟花绽放的特效,唯美不过如此.图片可以换成自己喜欢的夜景或人物都可以. 主要代码图片选择引入: html, body { margin: 0; padding: 0; overflow: hidden; background: #000; font-family: Montserrat, sans
基于JavaScript实现动态雨滴特效

目录演示技术栈源码设置画布 js部分演示技术栈介绍一下画布吧: HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性它的方法挺多的大家可以去搜一下我就说几个常用的: 源码设置画布 <canvas id="canvas" style="position:
基于javascript实现tab切换特效

本文实例为大家分享了javascript实现tab切换特效代码,供大家参考,具体内容如下效果图: 实现代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="gb2312"> <title>实践题 - 选项卡</title> <style type="text/css"> *{ margin:0px;
七个基于JavaScript实现的情人节表白特效

目录七夕情人节送花动画告白特效玫瑰花盛开动画告白特效 3d旋转相册点击爱心散开动画告白特效雷电打出告白文字特效粒子组合告白文字特效小熊拉手CSS3情人节动画表白特效七夕情人节送花动画告白特效效果展示代码展示: <div id='content'> <ul class='content-wrap'>  <li>  <div class="a_background&
JavaScript实现雪花飘落效果特效

没有雪的冬天失去了冬天的美景,不见了千里冰封,万里雪飘的北国之美,诗人无从写雪,画家画不出雪景,摄影师拍不到冬天的美丽.雪,是冬天的灵魂,为大地铺好背景,之后发生的都如梦似幻,就像童话般的存在.冬天没有雪,能难倒程序猿吗,没有雪自己造,这篇文章主要介绍了JavaScript实现雪花飘落效果特效,需要的朋友可以参考下 !DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo
一个JavaScript的求爱小特效

这里面做了一个JavaScript的求爱小特效,效果如下: 不仅能出现下面的图的效果,还可以让这个图形跟随着鼠标转动哦,这里面只是一个简单的没有修饰的小例子,基于这个例子可以让求爱,更加好玩了.闷骚男们,是不是可以给你的小萝莉发个这样的网页啊.给力的. 贴上code吧: 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert t
基于javascript的异步编程实例详解

本文实例讲述了基于javascript的异步编程.分享给大家供大家参考,具体如下: 异步函数这个术语有点名不副实,调用一个函数后,程序只在该函数返回后才能继续.JavaScript程序员如果称一个函数为异步的,其意思就是这个函数会导致将来再运行另一个函数,后者取自于事件队列.如果后面这个函数是作为参数传递给前者的,则称其为回调函数. callback 回调函数是异步编程最基本的方式. 采用这种方式,我们把同步操作变成了异步操作,主函数不会堵塞程序运行,相当于先执行程序的主要逻辑,将耗时的操作推迟

基于JavaScript实现飘落星星特效

相关推荐

随机推荐