基于JavaScript实现飘落星星特效


Posted in Javascript onAugust 10, 2017

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

1.效果图

基于JavaScript实现飘落星星特效

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 相关文章推荐
关于可运行代码无法正常执行的使用说明
May 13 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
提高Node.js性能的应用技巧分享
Aug 10 #Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 #Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 #Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 #Javascript
通过示例彻底搞懂js闭包
Aug 10 #Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 #Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 #Javascript
You might like
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python找出最小的K个数实例代码
2018/01/04 Python
Python内存读写操作示例
2018/07/18 Python
python中pika模块问题的深入探究
2018/10/13 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
python 字段拆分详解
2019/12/17 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
就职演讲稿范文
2014/05/19 职场文书
美化环境标语
2014/06/20 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
2014年外联部工作总结
2014/11/17 职场文书
经典导游欢迎词
2015/01/26 职场文书
家长高考寄语
2015/02/27 职场文书
国际贸易实训总结
2015/08/03 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python
Nginx 匹配方式
2022/05/15 Servers