cari

Rumah >hujung hadapan web >tutorial js >jQuery melaksanakan animasi memuatkan bar pemuatan halaman web dengan sambungan reben effect_jquery

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

WBOY
WBOYasal
2016-05-16 15:34:391671semak imbas

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>

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jquery mengesahkan demo 基础_jqueryArtikel seterusnya：jquery mengesahkan demo 基础_jquery

Artikel berkaitan

Lihat lagi