jQuery melaksanakan animasi memuatkan bar pemuatan halaman web dengan sambungan reben effect

jQuery melaksanakan animasi memuatkan bar pemuatan halaman web dengan sambungan reben effect_jquery

WBOY

Lepaskan： 2016-05-16 15:34:39

asal

1622 orang telah melayarinya

Contoh dalam artikel ini menerangkan animasi pemuatan bar pemuatan halaman web menggunakan jQuery untuk mencapai kesan sambungan reben. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Saya rasa animasi bar pemuatan halaman web kesan reben jQuery yang diperkenalkan di sini agak kreatif Walaupun ia tidak sukar, tidak mudah untuk memikirkan menggunakan latar belakang sedemikian untuk membuat bar pemuatan Memuatkan. Mengapa anda tidak terfikir untuk melakukan ini? Kesan bar pemuatan halaman web ini menggunakan pemalam jQuery.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-n-color-cha-web-loading-demo/

Kod khusus adalah seperti berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面初加载的动画</title>
<style type="text/css">
body{margin:0;}
.top_bg{height:5px;width:0;background-color:#093; background-image:url(images/colorbg.png);}/*如果你喜欢博主的那个彩带背景欢迎下载，直接把background:#f03换成背景*/
</style>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
   //顶部背景动画
   $(".top_bg").animate({
    width: "100%"
   },
   {
    queue: false,
    duration:4000
   });
 })
</script>
</head>
<body>
 <div class="top_bg"></div>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.