基于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 相关文章推荐
JavaScript中this关键字使用方法详解
Mar 08 Javascript
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
js 调用百度分享功能
Feb 27 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
Vue如何从1.0迁移到2.0
Oct 19 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 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 4.2书写安全的脚本
2006/10/09 PHP
搜索引擎技术核心揭密
2006/10/09 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
Javascript typeof 用法
2008/12/28 Javascript
BOM与DOM的区别分析
2010/10/26 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
使用Python中的cookielib模拟登录网站
2015/04/09 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
详解Python用户登录接口的方法
2019/04/17 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
使用python turtle画高达
2020/01/19 Python
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
安全教育演讲稿
2014/05/09 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
承诺书模板大全
2015/05/04 职场文书