Effekte, die dem Dropdown- und Schrumpfeffekt ähneln, werden sehr häufig verwendet. In diesem Kapitel wird kurz vorgestellt, wie dieser Effekt erzielt werden kann.
Das Codebeispiel lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>蚂蚁部落</title>
<style type="text/css">
body{
margin:0 auto;
padding:0;
width:570px;
font:75%/120% Arial, Helvetica, sans-serif;
}
a:focus{
outline:none;
}
#panel{
background:#69C7F7;
height:200px;
display:none;
}
.slide{
margin:0;
padding:0;
border-top:solid 4px #F27613;
}
.btn-slide{
background:#F27613 url(mytest/jQuery/20121225165932118.gif) no-repeat right -50px;
text-align:center;
width:144px;
height:31px;
padding:10px 10px 0 0;
margin:0 auto;
display:block;
font:bold 120%/100% Arial, Helvetica, sans-serif;
color:#fff;
text-decoration:none;
}
.active{
background-position:right 12px;
}
</style>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
return false;
})
})
</script>
</head>
<body>
<div style="display: block;" id="panel"></div>
<p class="slide">
<a href="javascript:;" rel="external nofollow" class="btn-slide active">点击查看效果</a>
</p>
</body>
</html>Der obige Code implementiert die Dropdown- und Verkleinerungseffekte. Der Code ist relativ einfach und wird hier nicht vorgestellt.
Wie man Bilder in ppt scrollen lässt
Eine vollständige Liste häufig verwendeter öffentlicher DNS
Der Unterschied zwischen Git und SVN
Nutzung der Bodenfunktion
Was beinhalten E-Commerce-Plattformen?
Datenbank-Er-Diagramm
Methoden zur Verhinderung von CC-Angriffen
So konfigurieren Sie JDK-Umgebungsvariablen
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
