suchen

Heim >Web-Frontend >js-Tutorial >Beispiel für von jquery_jquery implementierte Dropdown- und Verkleinerungseffekte

Beispiel für von jquery_jquery implementierte Dropdown- und Verkleinerungseffekte

WBOY
WBOYOriginal
2016-05-16 16:39:021300Durchsuche

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.

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：Die jQuery-CSS()-Methode ändert den vorhandenen CSS-Stil_jqueryNächster Artikel：Die jQuery-CSS()-Methode ändert den vorhandenen CSS-Stil_jquery

In Verbindung stehende Artikel

Mehr sehen