基于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 iframe编程相关代码
Dec 28 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
JSX在render函数中的应用详解
Sep 04 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类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
php多文件上传实现代码
2014/02/20 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
分享PHP守护进程类
2015/12/30 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
php格式文件打开的四种方法
2018/02/24 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
Thinkphp 框架配置操作之动态配置、扩展配置及批量配置实例分析
2020/05/15 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
原生js轮播特效
2017/05/18 Javascript
JS实现滑动插件
2020/01/15 Javascript
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
Python中functools模块的常用函数解析
2016/06/30 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
python递归法解决棋盘分割问题
2019/07/17 Python
详解python播放音频的三种方法
2019/09/23 Python
Python标准库itertools的使用方法
2020/01/17 Python
python如何爬取动态网站
2020/09/09 Python
大学生涯自我鉴定
2014/01/16 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
初三班主任寄语大全
2014/04/04 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
故意伤害辩护词
2015/05/21 职场文书
Java Spring Lifecycle的使用
2022/05/06 Java/Android
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python