分享一个插件“ Flickr Style Loading Animation Using JQuery ” – Flicker风格的加载动画，利用JQuery。后附核心代码及演示，并附插件官方链接：

HTML

<div id="shapeblue" class="bar"></div>
<div id="shapepink" class="bar"></div>

JQuery

$(function() {
    var wwidth = $(window).width();
    var bluewidth = $("#shapeblue").width();

    $("#shapeblue").css("left", (wwidth/2) - bluewidth);

    var bluepos = $("#shapeblue").position();
    var movex = $("#shapeblue").width() + 4;
    $("#shapepink").css("left", bluepos.left + movex);

    var playAnimate;

    function moveleft(el) {
        $(el).animate({
            left: '+='+movex
        }, 800, function() {
            $(el).css("z-index", "-100");
        });
    }

    function moveright(el) {
        $(el).animate({
            left: '-='+movex
        }, 800, function() {
            $(el).css("z-index", "100");
        });
    }

    function playAnimation() {
        moveleft("#shapeblue");
        moveright("#shapeblue");
        moveright("#shapepink");
        moveleft("#shapepink");
    }

    $("#playbtn").click(function() {
        if ($(this).text() == "Start") {
            playAnimate = setInterval(playAnimation, 800);
            $(this).text("Stop");
        } else {
            clearInterval(playAnimate);
            $(this).text("Start");
        }
        return false;
    });
});

CSS

.bar {
    width: 250px;
    height: 250px;
    -webkit-border-radius: 7.5em;
    -moz-border-radius: 7.5em;
    border-radius: 7.5em;
    margin-right: 2px;
    position: absolute;
}
#shapeblue {
    background: #0063dc;
    z-index: 1;
}
#shapepink {
    background: #ff0084;
    z-index: 0;
}

× 任刚 rengang.com.cn

赞助用于本站维护,手机长按识别二维码。

2元 5元 10元 50元 100元 意思一下

任刚（rengang.com.cn）整理分享，欣赏作品版权均归原作者所有，仅供学习交流。点击上方图标与好友分享！