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.
CSS-Bildlaufleistenstil
7 Möglichkeiten, SPS-Programme zu schreiben
hat eine eigene Grundstücksnutzung
So schließen Sie das von window.open geöffnete Fenster
Worauf bezieht sich Bean in Java?
So starten Sie regelmäßig neu
So richten Sie die Domänennamenumleitung ein
Einführung in häufig verwendete Top-Level-Domain-Namen
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
