Jquery实现花瓣随机飘落（收藏自慕课网）

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

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

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

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

 

 

在开始前，按照惯例吐槽一下最近的状况吧！昨天我骑车完成第4起车祸。然后打字只能靠6根指头，还有脑袋也被来了一下。。。然后目测除了外伤，头疼之外无大碍！吐槽点在与，程序员骑车的时候想的还是代码。然后peng。最后既然入了这行了，还是别玩车了。。。T_T

 

飘花效果的实现

飘花的效果稍微复杂一点，有一定量的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()  删除这个对象

 

然后精简一下代码，因为我只要飘花效果

 

    <div id='content'>
        <!-- 飘花 -->
        <div id="snowflake"></div>
    </div>

 

获取外面#content的宽高

然后#snowflake里面做效果

#content { width: 100%; height: 100%; top: 42px;
overflow: hidden; position: absolute; }

然后么css么就是这样了，top：42px是因为我的导航高度

#snowflake { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
.snowRoll { position: absolute; opacity: 0; -webkit-animation-name: mysnow; -webkit-animation-duration: 20s; -moz-animation-name: mysnow; -moz-animation-duration: 20s; height: 80px; }
 @-webkit-keyframes mysnow {  0% {
 bottom: 100%;
}
 50% {
 -webkit-transform: rotate(1080deg);
}
 100% {
 -webkit-transform: rotate(0deg) translate3d(50px, 50px, 50px);
}
}
 @-moz-keyframes mysnow {  0% {
 bottom: 100%;
}
 50% {
 -moz-transform: rotate(1080deg);
}
 100% {
 -moz-transform: rotate(0deg) translate3d(50px, 50px, 50px);
}
}

这里是给飘花加旋转之类的css3特技

 

<script type="text/javascript">
$(function() {

    var snowflakeURl = [
        'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_1.png',
        'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_2.png',
        'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_3.png',
        'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_4.png',
        'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_5.png',
        'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_6.png'
    ]  //js设置数组存储6张花瓣的图片
　　
     var container = $("#content");
       visualWidth = container.width();
       visualHeight = container.height();
　　//获取content的宽高

　　
    ///////
    //飘雪花 //
    ///////
    function snowflake() {
        // 雪花容器
        var $flakeContainer = $('#snowflake');
　　　　　　
        // 随机六张图
        function getImagesName() {
            return snowflakeURl[[Math.floor(Math.random() * 6)]];
        }
        // 创建一个雪花元素
        function createSnowBox() {
            var url = getImagesName();
            return $('<div class="snowbox" />').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()
　　　//执行函数

})
</script>

 

好了代码撸完了...最后分享个艾伦的博客

撸完代码了......然后单身狗没地方约......那就来个段子把

最近有个游戏+电视剧叫花千骨的东西。。。作为个动漫宅每天爱奇艺的广告都是这个鬼。。然后有一广告“花千骨的血可以使花草枯萎”

这个时候有神人表示，那么，经过那一夜，那位兄台现在是否安好，零部件是否有遗漏。。。

 

 

然后最后把需要用到的库发一下

 

一个jquery，，，这个看标题么就知道了

jQuery Transit还有这个东西

 http://github.com/rstacruz/jquery.transit

jquery对一些效果的扩展