Example of drop-down and shrink effects implemented by jquery

Home

Web Front-end

JS Tutorial

Example of drop-down and shrink effects implemented by jquery_jquery

May 16, 2016 pm 04:39 PM

drop down

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:

&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
&lt;head&gt; 
&lt;meta charset=" utf-8"&gt; 
&lt;meta name="author" content="http://www.softwhy.com/" /&gt; 
&lt;head&gt; 
&lt;title&gt;蚂蚁部落&lt;/title&gt; 
&lt;style type="text/css"&gt; 
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; 
} 
&lt;/style&gt; 
&lt;script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"&gt;&lt;/script&gt; 
&lt;script type="text/javascript"&gt; 
$(document).ready(function(){ 
$(".btn-slide").click(function(){ 
$("#panel").slideToggle("slow"); 
$(this).toggleClass("active"); 
return false; 
}) 
}) 
&lt;/script&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;div style="display: block;" id="panel"&gt;&lt;/div&gt; 
&lt;p class="slide"&gt; 
&lt;a href="javascript:;" rel="external nofollow" class="btn-slide active"&gt;点击查看效果&lt;/a&gt; 
&lt;/p&gt; 
&lt;/body&gt; 
&lt;/html&gt;

Copy after login

The above code implements the drop-down and shrinking effects. The code is relatively simple and will not be introduced here.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn