Effects similar to drop-down and shrinking are very frequently used. This chapter briefly introduces how to achieve this effect.
The code example is as follows:
<!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>The above code implements the drop-down and shrinking effects. The code is relatively simple and will not be introduced here.
remove means
How to set the computer to automatically connect to WiFi
How to use html for web navigation
What are the methods to implement operator overloading in Go language?
Detailed explanation of nginx configuration
Introduction to javascript special effects code
Recommended order for learning c++ and c language
How to buy Bitcoin
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
