HTML5仿Flickr网页加载动画效果

时间：2014-03-04 08:52 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE HTML>
<html>
<head>
<title>jQuery类似Flickr加载动画效果</title>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
<script type="text/javascript">
$(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() == "开始") {
            playAnimate = setInterval(playAnimation, 800);
            $(this).text("停止");
        } else {
            clearInterval(playAnimate);
            $(this).text("开始");
        }
        return false;
    });
});
</script>
<style type="text/css">
* {
    font-family: Arial, "Free Sans";
}
#container {
    text-align: center;
    width: 800px;
    padding: 40px 0;
    margin: 0 auto;
}
#container a {
    background: #0063dc;
    color: #ffffff;
    text-decoration: none;
    padding: 5px 8px;
    font-size: 18px;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
}
#container a:hover {
    background: #ff0084;
}
#text {
    color: #0063dc;
    margin-top: 30px;
    font-size: 12px;
    font-weight: bold;
}
.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;
}
</style>
</head>
<body>
    <div id="container">
        <div id="control">
            <a href="" id="playbtn">开始</a>
            <div id="text"> 点击 "开始"观看Loading动画</div>
        </div>
    </div>
    <div id="shapeblue" class="bar"></div>
    <div id="shapepink" class="bar"></div>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<div style="text-align:center;clear:both"></div>
</body>
</html>

HTML5仿Flickr网页加载动画效果

网页特效