<!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>
<title>一個(gè)Banner廣告收縮效果</title>
<style type="text/css">
*{margin:0; padding:0;}/*為了方便 直接這樣重置了*/
#main{margin:0 auto; width:960px;}
#banner{display:none; margin:0 auto; width:960px; height:160px; background:url(images/banner.png) no-repeat; position:relative;}
#close{display:block; width:50px; height:22px; text-align:center; line-height:22px; border:1px #ddd solid; background:#000; color:#fff; font-size:12px; float:right; cursor:pointer;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$
(
function()
{
$("#banner").slideDown();
var Up=function(){$("#banner").slideUp(1500)}
setTimeout(Up,3000);
$("#close").click
(
function()
{
$("#banner").slideToggle
(
600,function()
{
if($("#banner").css("display") == "none")
{
$("#close").text("打開");
}
else
{
$("#close").text("關(guān)閉");
}
}
);
}
);
}
);
</script>
</head>
<body>
<div id="main">
<div id="banner"></div>
<span id="close">關(guān)閉</span>
</div>
</body>
</html>

希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery實(shí)現(xiàn)導(dǎo)航固定頂部的效果仿蘑菇街
這篇文章主要介紹了jquery實(shí)現(xiàn)導(dǎo)航固定頂部的效果，仿蘑菇街的，感覺還不錯(cuò)，下面將實(shí)例與大家分享下
2014-10-10
jQuery插件原來如此簡(jiǎn)單 jQuery插件的機(jī)制及實(shí)戰(zhàn)
這種插件是將對(duì)象方法封裝起來，用于對(duì)通過選擇器獲取的jQuery對(duì)象進(jìn)行操作，是最常見的一種插件
2012-02-02
jQuery代碼優(yōu)化方法總結(jié)
本篇文章給大家總結(jié)了關(guān)于jQuery代碼優(yōu)化方法，如果你這方面有需求，跟著小編一起學(xué)習(xí)下吧。
2018-01-01
jquery中綁定事件的異同
本文主要介紹了jquery中bind(),live(),delegate(),on()綁定事件的不同點(diǎn)和相同點(diǎn)，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
Spring MVC中Ajax實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猄pring MVC中Ajax實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-07-07
Jquery 滑入滑出效果實(shí)現(xiàn)代碼
Jquery 滑入滑出效果實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2010-03-03
jQuery實(shí)用密碼強(qiáng)度檢測(cè)
本篇文章主要介紹了jQuery實(shí)用密碼強(qiáng)度檢測(cè)，這是一個(gè)非常常見的功能，可以驗(yàn)證密碼的強(qiáng)度，本文使用jQuery來實(shí)現(xiàn)，有需要的小伙伴可以參考下。
2017-03-03
jquery插件實(shí)現(xiàn)堆疊式菜單
這篇文章主要介紹了jquery插件實(shí)現(xiàn)堆疊式菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
適用于手機(jī)端的jQuery圖片滑塊動(dòng)畫
這篇文章主要為大家分享了適應(yīng)手機(jī)端的jQuery圖片滑塊動(dòng)畫,不僅在PC瀏覽器上可以使用，而且更適合在手機(jī)端的網(wǎng)頁中使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
基于JQuery和DWR實(shí)現(xiàn)異步數(shù)據(jù)傳遞
這篇文章主要介紹了基于JQuery和DWR實(shí)現(xiàn)異步數(shù)據(jù)傳遞,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-10-10