suchen

Heim >Web-Frontend >js-Tutorial >Von jquery_jquery implementierter Code für den Verkleinerungseffekt von Banneranzeigen

Von jquery_jquery implementierter Code für den Verkleinerungseffekt von Banneranzeigen

WBOY
WBOYOriginal
2016-05-16 15:40:521627Durchsuche

Das Beispiel in diesem Artikel beschreibt den von jquery implementierten Code zum Verkleinern von Banneranzeigen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier ist eine Demonstration des Verkleinerungseffekts einer Banneranzeige. Nachdem Sie darauf geklickt haben, wird auf der Webseite eine große Anzeige angezeigt. Nach einem Klick auf „Schließen“ wird die Anzeige verkleinert . Gerne können Sie daraus lernen.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-banner-show-close-style-codes/

Der spezifische Code lautet wie folgt: 

<!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>一个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("关闭");
}
}
);
}
);
}
);
</script>
</head>
<body>
<div id="main">
<div id="banner"></div>
<span id="close">关闭</span>
</div>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS implementiert Code_Javascript-Fähigkeiten mit horizontaler Dehnung und dynamischem TeleskopmenüeffektNächster Artikel：JS implementiert Code_Javascript-Fähigkeiten mit horizontaler Dehnung und dynamischem Teleskopmenüeffekt

In Verbindung stehende Artikel

Mehr sehen