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
Lepaskan: 2016-05-16 15:34:39
asal
1683 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.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan