js 面向对象方式动画效果：花瓣雨

效果图：

说明：效果图片中的花瓣是图片，
代码如下：


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{overflow: hidden;}</style>
</head><body><script>// 从a到b的随机数function ranDom(a, b) {var r = parseInt(Math.random() * (b - a + 1)) + a;return r;}// 构造函数function Girl(top, right) {this.top = top;this.right = right;// 创建的方法this.init = function () {// 创建节点, 节点的样式, 节点拼接this.dom = document.createElement('div');this.dom.style.cssText = `width: 30px; height: 30px; position: absolute; background: url(img/hb${ranDom(1, 3)}.png) no-repeat; background-position: 0px -2px;`;this.dom.style.top = this.top + 'px';this.dom.style.right = this.right + 'px';document.body.appendChild(this.dom);}// 移动的方法this.move = function () {// 此处的this为新创建的Girl对象, 把this保存一份(self), 在进入定时器内部再使用// console.log(this);var self = this;// 声明变量: 位置, 图片编码(0-7)var top = 0;var index = 0;// 定时器, top实时改变, index++this.timer = setInterval(function () {top += 5;index++;// 验收indexif (index > 7) index = 0;// 验收topif (top >= 1000) self.byebye();// 位置改变// console.log(this); // window// console.log(this.dom); // undefined// console.log(self); // Girl对象// console.log(self.dom); // divself.dom.style.top = top + 'px';// 图片切换// self.dom.style.backgroundPosition = -79 * index + 'px -216px';}, 50);}// 消失的方法this.byebye = function () {// 清除定时器clearInterval(this.timer);// 移除节点this.dom.remove();}this.init();this.move();}setInterval(() => {new Girl(0, ranDom(100, 900));new Girl(0, ranDom(100, 900));new Girl(0, ranDom(100, 900));new Girl(0, ranDom(100, 900));}, 1000)setInterval(() => {new Girl(0, ranDom(100, 900));new Girl(0, ranDom(100, 900));}, 1500)setInterval(() => {new Girl(0, ranDom(500, 1200));new Girl(0, ranDom(500, 1200));}, 2000)</script>
</body></html>

js 面向对象方式动画效果：花瓣雨相关推荐

html翻牌动画效果,js+css3翻牌动画效果
这是一款js+css3翻牌动画效果,界面设计感不错的,喜欢可以下载哦温馨提示不兼容IE6,7,8浏览器. 查看演示下载资源: 16 次下载资源下载积分: 20 积分 function () { ...
使用JS代码编写动画效果
使用JS代码编写动画效果下面展示一些 JS代码. 创建一个可以简单移动的动画函数//obj 要执行动画的对象// attr 想要变化的方向或大小如width top left//target 目标 ...
js修改display_Vue.js从零开始——过渡 / 动画效果（2）
题图是2013年在 OSRAM 的顶层拍的远景,能看到慕尼黑的高楼大厦不算多,远近也就看到4栋,左上的富士通,右侧远处的奥林匹克公园的高塔还有宝马大厦,最远处的那一栋我不知道是哪里了--这是因为不在老 ...
JS实现倒计时动画效果
js通过Date对象实现倒计时效果 <!DOCTYPE html> <html lang="en"> <head><meta charse ...
js面向对象（萤火虫效果）
使用面向对象的方法实现一个萤火虫的效果. 页面样式,bg.jpg是一张动图,使用的是jQuery. <!DOCTYPE html> <html><head>< ...
react中react-custom-scrollbars返回顶部功能，如何使其有平滑动画效果；原生js scroll平滑动画效果
1.Scrollbars是react-custom-scrollbars插件暴露出来的组件 scrollRef.current.view.scroll({top: 0,left: 0,behavior ...
js实现玫瑰动画效果
目标: 使用canva和js实现玫瑰的动画. 代码: <!doctype html> <html><head><title>红玫瑰</title& ...
D3.js实现带动画效果的柱状图
先上效果图,如下图所示: <!DOCTYPE html> <html lang="zh-cn"><head><meta charset=& ...
vue + Three.js实现3d动画效果
1.安装依赖 // 引入three.js相关插件npm install three --save// 安装轨道控件插件// npm install three-orbit-controls//安装加载 ...

js 面向对象方式动画效果：花瓣雨

js 面向对象方式动画效果：花瓣雨相关推荐

最新文章

热门文章

js 面向对象方式 动画效果：花瓣雨

js 面向对象方式 动画效果：花瓣雨相关推荐

最新文章

热门文章

js 面向对象方式动画效果：花瓣雨

js 面向对象方式动画效果：花瓣雨相关推荐