jQuery飘落的枫叶

所属分类:其他-动画效果

jQuery飘落的枫叶 ie兼容8
setInterval(function() {
    var f = $(document).width();
    var e = Math.random() * f - 300;// 枫叶的定位left值    
    var o = 0.2 + Math.random();// 枫叶的透明度   
    var fon = 10 + Math.random() * 10; // 枫叶大小    
    var l = e - 100 + 200 * Math.random();// 枫叶的横向位移    
    var k = 2000 + 5000 * Math.random();
    var deg = Math.random() * 360; // 枫叶的方向    
    $(d).clone().appendTo(".maplebg").css({
        left: e + "px",
        opacity: o,
        transform: "rotate(" + deg + "deg)",
        "font-size": fon,
    }).animate({
        top: "550px",// 枫叶飘落的高度     
        left: l + "px",
        opacity: 0.1,
    }, k, "linear", function() {
        $(this).remove()
    })
}, 1000)

首先直接贴出代码,注释就是使用方法,参数配置可相应调整

相关插件-动画效果

有趣的动画-ABOWMAN

今天我要给大家介绍一款非常有趣的动画,如果你喜欢养金鱼或者是养一群小乌龟,那么你肯定会喜欢上这个动画的。我们只需要将一段代码引用到自己的html页面中即可在自己的网页上拥有这些动画。
  动画效果
 20709  40

为网页增加 Ajax 加载特效

使用 Ajax 加载页面时不希望用户看到 DOM Change 的过程,在部分机子上你会觉得页面“闪”了一下,所以就需要一个炫酷吊炸天的动画来掩盖它。
  动画效果
 15313  42

jquery创建飘动的云插件jQlouds

jQlouds是一个jQuery插件,让您在网页中轻松创建飘动的云。有一些选项可以定制你想要的效果。
  动画效果
 375295  124

12款常用动画图标

12款常用动画图标
  动画效果
 3687  69

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币

    小遮. 0
    2017/10/31 14:23:41
    HIO 0
    2017/10/12 17:32:17

    很漂亮,也不贵,下载啦,支持,支持

    回复
    李小丽 0
    2017/9/28 10:35:39

    那个彩色的枫叶是怎么做到的

    回复
    connietw 0
    2017/9/19 23:52:19
    暴走的鱼 0
    2017/8/11 15:06:07
    暴走的鱼 0
    2017/8/11 15:05:52
    皮卡丘的黄玉 0
    2017/7/6 13:28:34
    发发不洗头 0
    2017/6/13 23:28:52
    梦醒20120101,12:17 0
    2017/5/27 12:44:53

     var d = "<div class='maple'>??<div>"里面的枫叶图标是怎么来的

        忆枫0
        2017/5/28 17:33:25

        那个枫叶图标是个特殊字符

    回复
    菲雪 0
    2017/5/18 16:05:27

    厉害!学习啦!

    回复
取消回复