HTML5仿Flickr网页加载动画效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

jerry

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE HTML>
<html>
<head>
<title>jQuery类似Flickr加载动画效果</title>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

HTML5仿Flickr网页加载动画效果

分类

HTML5代码

描述

一个由HTML5相关技术要点实现的网页加载动画，俗称为Loading动画，可在网页加载的时候显示，生成了两个圆形，点击开始按钮后可观看演示动画，可看到两个圆前后交替轮番动画，兼容的浏览器：火狐、Chrome、Opera、世界之窗等，在IE8下，圆...