效果实现JS实现飞雪飘飘的效果

本文笔者在上海吃饭的时候突然想到的...之前就有想写几篇关于效果实现的笔记，所以回家到之后就奋笔疾书的写出来发表了

在网站或者游戏开发中，我们常常需要实现飞雪漫天，细雨绵绵，蝴蝶纷飞等效果。这些效果有个共同之处就是随机性很大，是一种整体呈一种趋势的动画效果。JS中的Math.random()方法为我们供给了随机功能，setInterval()方法为我们供给了短周期调用的功能，利用这两个方法我们就能够实现这类群体性的动画效果，如下图的飞雪效果（虽然有些粗拙，但是基本原理相似）。

第一步：建立动态元素库，如雪花，雨滴，蝴蝶等。

var img = {1:"<img src='image/snow1.png'/>",2:"<img src='image/snow2.png'/>",3:"<img src='image/snow3.png'/>"
}

上面的代码中，我们选择了三张不同的雪花图片，为透明的png格式，同时统一其巨细。

第二步：实现掉雪花的方法，即我们在<body>标签中插入一片雪花，让其按照一定轨迹运动，并终究删除。

每日一道理
“一年之计在于春”，十几岁的年纪，正是人生的春天，别辜负了岁月老人的厚爱与恩赐。行动起来，播种梦想吧！

function loseSnow(){var posx = parseInt(1366*Math.random());   //发生一个1-1366的随机数，即浏览器宽的随机一个位置var posx2 = parseInt(1366*Math.random());var img_index = parseInt(3*Math.random())+1;  //发生一个1-3的随机数，用来从img对象中取一个雪花,因为图片定名已经方便应用，故可以不应用img对象

//发生一个img标签，使其初始位置为屏幕顶端的一个随机点var img = $("<img src='image/snow"+img_index+".png' style='width:40px;height:40px;position:absolute;top:0px;left:"+posx+"'/>");$("body").append(img);img.animate({ top: "800px",left:posx2}, 10000);  //img的轨迹是从1366中的一个位置到另一个位置，但垂直方向向下setTimeout(function(){  //并在10秒后删除该雪花释放内存img.remove();},10000);
}

上面方法从浏览器顶部的一个随机位置发生一片雪花，并向下掉落到距浏览器顶部800像素的另一个随机位置，并终究删除释放内存。

最后一步很简单，我们通过周期调用上面的方法开始下起漫天的大雪。

setInterval(function(){  //每隔2毫秒发生一个雪花loseSnow();
},2);

本例向大家分享了特效的基本原理，图例效果也比较差。但是JS的动画原理都是万变不离其中。而且JS的动画绝对比较消耗设备的资源，特别是在手机端。现在在特效制造上提议尽可能应用CSS3的动画功能，以提高程序效率。

文章结束给大家分享下程序员的一些笑话语录：程序语言综述
CLIPPER 程序员不去真的猎捕大象，他们只是购买大象部分的库然后花几年的时间试图综合它们。
DBASE 程序员只在夜间猎捕大象，因为那时没人会注意到他们还在使用石弓。
FOXPRO 程序员开始使用更新更好的步枪，这使他们花掉比实际狩猎更多的时间学习新的射击技术。
C 程序员拒绝直接购买步枪，宁可带着钢管和一个移动式机器车间到非洲，意欲从零开始造一枝完美的步枪。
PARADOX 程序员去非洲时带着好莱坞关于猎捕大象的电影剧本，他们认为照剧本行事就会逮到一头大象。
ACCESS 程序员在没有任何猎象经验的经验下就出发了，他们穿着华丽的猎装、带着全部装备，用漂亮的望远镜找到了大象，然后发觉忘了带扳机。
RBASE 程序员比大象还要稀少，事实上，如果一头大象看到了一个RBASE程序员，对他是个幸运日。
VISUAL ACCESS 程序员装上子弹、举起步枪、瞄准大象，这使大象感到可笑，究竟谁逃跑。他们无法抓住大象，因为由于他们对多重控制的偏爱，他们的吉普车有太多的方向盘因而无法驾驶。
ADA、APL和FORTRAN 程序员与圣诞老人和仙女一样是虚构的。
COBOL 程序员对和自己一样濒临灭绝的大象寄予了深切的同情。

--------------------------------- 原创文章 By
效果和实现
---------------------------------

效果实现JS实现飞雪飘飘的效果相关推荐

js实现html图片翻页效果,原生JS实现图片翻书效果
JS实现图片翻书效果-懒人图库 #center { LEFT: 50%; POSITION: absolute; TOP: 50% } #DHTMLBOOK { BACKGROUND: #000; L ...
红包雨效果html,js+css实现红包雨效果
//每一个红包都是相对于父元素定位,通过z-index来设置层级 let zIndex = 1; function bindEvent() { $redPackage.on('click','.js- ...
【加强版】js原生实现拖拽效果，这次没有用document的mousedown、mousemove、mouseup事件我们来点实际的（但是有个弊端：拖拽过程中鼠标会变成一个禁用符号，不太友好）
<div class='dragged'></div> //初始化需要拖拽的列initDrags() {var arr = document.querySelectorAll( ...
【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...
js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些一.总结一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
video.min.js php,使用flv.js与video.js做一个视频直播效果
这次给大家带来使用flv.js与video.js做一个视频直播效果,使用flv.js与video.js做出视频直播效果的注意事项有哪些,下面就是实战案例,一起来看一下. 环境配置首先运行livego ...
纯JS制作的窗户雨滴效果
今天本站推荐的代码是用JS制作的窗户雨滴效果,绚丽的效果不亚于FLASH,由于不知出处在哪,总而言之, 在此感谢作者的慷慨分享. function demo() { var engine = new ...
原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单 2, 只需引入 ...
html制作翻页效果代码,使用原生JS实现滚轮翻页效果的示例代码
一.滚轮事件当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的.在IE6, IE7, IE8, Opera 10+, Sa ...
php实现飘窗,JS实现网站图片飘窗效果，JavaScript悬浮广告（附详细代码）
原标题:JS实现网站图片飘窗效果,JavaScript悬浮广告(附详细代码) JS实现网站图片飘窗效果,Java悬浮广告,郑州SEO提供以下代码,仅供参考: 飘窗效果-丁光辉博客(www.dinggu ...

效果实现JS实现飞雪飘飘的效果

效果实现JS实现飞雪飘飘的效果相关推荐

最新文章

热门文章