进度条（一）

来源：互联网发布：数据防泄漏国内厂家编辑：程序博客网时间：2024/05/22 14:24
用定时器进行控制进度条：
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>定时器进度条</title>    <script src="js/jquery-1.7.2.min.js"></script>    <style>        html,body{            height:100%;        }        *{            margin:0;            padding:0;        }        img{            display:block;            width:80%;            height:auto;            margin:0 auto;        }        .loading{            width:100%;            height:100%;            position:fixed;            top:0;            left:0;            background:#fff;        }        .pic{            width:64px;            height:64px;            background:url(images/760.gif);            position:absolute;            top:0;            left:0;            bottom:0;            right:0;            margin:auto;        }    </style>    <script>        $(function(){            var load= '<div class="loading"><div class="pic"></div></div>';            //定义一个变量            $('body').append(load);            //将变量插入到body中去            setInterval(function(){                //淡出                $('.loading').fadeOut();            },3000)        })    </script></head><body>    <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1510670735&di=6ab105cb4c836eaeb26783d65c081797&src=http://i.epetbar.com/2015-01/22/ios1421939751_4.jpg">    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510680853542&di=08c4fa2808bd943a3e377f866b832a68&imgtype=0&src=http%3A%2F%2Fwww.ziyingcat.com%2Fup%2F1558939181.jpg">    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510680853542&di=08e2e77b86b67b9e6d2649b5ede18201&imgtype=0&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20140321%2F20140321104024-984412882.jpg">    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510680853537&di=16272e21c9083f42cb94efb6ef6521ca&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D622e37fb3cd12f2eda08a62327abbf17%2Fb8389b504fc2d5629cf786c1ed1190ef76c66c1a.jpg">    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510680853531&di=a46cb067bdba37434053e1e5c4f87a20&imgtype=0&src=http%3A%2F%2Fimg2w.pclady.com.cn%2Fpclady%2F1008%2F09%2Fspcgroup%2Fwidth_640%2Cqua_60%2F588642_1.jpg">    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510680853523&di=5a7f6d2753f06b62754052c46c43c7a4&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D28d72ecfdf39b60059c307f481395f5f%2F3bf33a87e950352afb4508245943fbf2b2118bf1.jpg"></body></html>
阅读全文
0 0