HTML5仿Flickr网页加载动画效果

2024-09-05 12:19:07

字体：大中小

来源：转载

供稿：网友

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

<!DOCTYPE HTML><html><head><title>jQuery类似Flickr加载动画效果</title><script type="text/javascript" src="/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">            开始            <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 SVG指针式时钟走时特效

下一篇：Canvas绘制标志【中国银行标志HTML5】

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注