你的位置:首页 > 软件开发 > Java > Jquery实现花瓣随机飘落(收藏自慕课网)

Jquery实现花瓣随机飘落(收藏自慕课网)

发布时间:2015-08-14 21:00:17
这个东西实际上慕课的艾伦大大先写的。然后别人推荐给我,偶一直收藏着,然后偶再推荐给偶的队友们,然后呢,这帮货就懒得都不肯去看。。。接着今天受伤在家就提出来了一点东西放在我博客顶上。。。然后艾伦的原文呢在这里。http://www.imooc.com/learn/453 ...

这个东西实际上慕课的艾伦大大先写的。

然后别人推荐给我,偶一直收藏着,然后偶再推荐给偶的队友们,然后呢,这帮货就懒得都不肯去看。。。

接着今天受伤在家就提出来了一点东西放在我博客顶上。。。

然后艾伦的原文呢在这里。http://www.imooc.com/learn/453

 

Jquery实现花瓣随机飘落(收藏自慕课网)飘花效果的实现

飘花的效果稍微复杂一点,有一定量的JavaScript代码,通过JS+CSS3的组合实现的。观察右边效果,可以大致分解飘花的实现

  • 飘花比人物的层级都高
  • 飘花数量非常多
  • 飘花会有一定的轨迹运动
  • 飘花带有渐变的效果
  • 飘花带有旋转的效果
  • 飘花落到地面会消失

这里采用的JS+CSS3的结合实现,CSS3实现旋转部分,首先从布局上来说,飘花是要比所有内部元素层级都要高,所以布局上是要与页面li平级才可以

实现原理:

通过定时器调用JS代码不断的动态创建雪花节点,随机选择一个图片作为其背景,赋予三个初始的样式属性top,left与opacity,通过transition动画过度的方式执行这3个属性的动画变化。整个原理其实也是很简单的,主要涉及了一些细节的问题:例如元素的创建、图片的随机、开始的left与opacity的随机处理、最终值的计算等等

执行的流程:

  • getImagesName随机6张图片,snowflakeURl定义一个地址的范围
  • createSnowBox创建雪花元素的节点,并且增加一个snowRoll的样式,也就是旋转的关键帧实现
  • 定时器设置200ms不断的生成雪花对象,计算出3个属性的初始值,通过createSnowBox创建雪花元素,并且附上初始值,然后执行transition附上最终值,执行动画
  • 动画结束后执行$(this).remove()  删除这个对象

 

   /////// //飘雪花 // /////// function snowflake() { // 雪花容器 var $flakeContainer = $('#snowflake');       // 随机六张图 function getImagesName() { return snowflakeURl[[Math.floor(Math.random() * 6)]]; } // 创建一个雪花元素 function createSnowBox() { var url = getImagesName(); return $('<div />').css({ 'width': 41, 'height': 41, 'position': 'absolute', 'backgroundSize': 'cover', 'zIndex': 100000, 'top': '-41px', 'backgroundImage': 'url(' + url + ')' }).addClass('snowRoll'); } // 开始飘花 setInterval(function() { // 运动的轨迹 var startPositionLeft = Math.random() * visualWidth - 100, startOpacity = 1, endPositionTop = visualHeight - 40, endPositionLeft = startPositionLeft - 100 + Math.random() * 500, duration = visualHeight * 10 + Math.random() * 5000; // 随机透明度,不小于0.5 var randomStart = Math.random(); randomStart = randomStart < 0.5 ? startOpacity : randomStart; // 创建一个雪花 var $flake = createSnowBox(); // 设计起点位置 $flake.css({ left: startPositionLeft, opacity : randomStart }); // 加入到容器 $flakeContainer.append($flake); // 开始执行动画 $flake.transition({ top: endPositionTop, left: endPositionLeft, opacity: 0.7 }, duration, 'ease-out', function() { $(this).remove() //结束后删除 }); }, 200); }    snowflake()

原标题:Jquery实现花瓣随机飘落(收藏自慕课网)

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录