網頁計劃師正在制造網頁的時刻，常常會用到表現戰隱蔽元素，那是一個根本的技巧，正在那裡，我們是要分享若何用jQuery做到那一面。
1.HTML標志
<div class=”list-tag”>
<div class=”content-list-tag”>
</div>
<div class=”more-tags”>
<img src=”/images/des.jpg” alt=”網站扶植” border=”0″>
</div>
2.CSS
.list-tag {
height: 195px;
overflow: hidden;
}
.more-tags {
cursor: pointer;
padding-top: 15px;
background: url(”shade-tag.png”) center top no-repeat;
display:block;
text-align: center;
}
3.JS jQuery
$(”.more-tags”).toggle(function() {
contentTagsHeight= $(”.content-list-tag”).height();
$(”.list-tag”).animate({height : contentTagsHeight});
$(this).children(”img”).animate({rotate: ”180deg”});
}, function() {
$(”.list-tag”).animate({height : ”195px”});
$(this).children(”img”).animate({rotate: ”0deg”});
});
那我們便完成瞭。經由過程修正CSS戰JS您借能夠做更炫麗的後果。
樂網科技本創：/newsview.asp?newId=209&lm=11