ホームページ >毎日のプログラミング >HTMLの知識 >jqueryを使用してクリックの拡大および縮小効果を実現する方法
jqueryを使用してクリックの拡大および縮小効果を実現する方法
- 藏色散人オリジナル
- 2018-12-17 14:12:0712382ブラウズ
長いテキストを読むとき、私たちは通常、展開ボタンまたは折りたたみボタンをクリックします。この効果は明らかにユーザーの向上に役立ちます。経験。次に、jQuery を使用してクリックによる拡大と縮小の効果を実現し、上下方向の拡大と非表示の効果を実現するには、jQuery の slideUp() メソッドと slideDown() メソッドを使用します。
ここでは、具体的なコード例に基づいて、クリックによる拡大と縮小の効果を実現する jquery メソッドを紹介します。
コード例は次のとおりです。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery实现点击展开收缩效果示例</title>
<style type="text/css">
.box{
width: 400px;
background: #f0e68c;
border: 1px solid #a29415;
}
.box-inner{
padding: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slide-up").click(function(){
$(".box").slideUp();
});
$(".slide-down").click(function(){
$(".box").slideDown();
});
});
</script>
</head>
<body>
<button type="button" class="slide-up">关闭</button>
<button type="button" class="slide-down">展开</button>
<hr>
<div class="box">
<div class="box-inner">新浪娱乐讯 据台湾媒体报道，2018MAMA香港场14日晚间7点盛大展开颁奖典礼，嘻哈、性感、抒情各种团体
合作的舞台表演精彩绝伦，《ETtoday》全程独家直播典礼现场，为观众快速整理8大看点，从防弹RM流利的英文演讲开场，到最后防弹内
心告白曾想解散，全场零冷场。</div>
</div>
</body>
</html>上記のコードでは、テキストを含む 2 つの div、box および box-inner を作成しました。閉じるボタンと展開ボタンをクリックすると、次のようになります。それぞれ、slideUp() メソッドと slideDown() メソッドが呼び出されます。
slideUp()このメソッドは、要素がすでに表示されている場合、スライド効果を使用して選択した要素を非表示にします。
slideDown() メソッドは、スライド効果を使用して非表示の選択要素を表示します。
最終的な効果は次のとおりです。
注 : slideDown() は、jQuery メソッドによって隠された要素に適しています。または、CSS で display:none を宣言して要素を非表示にします (visibility:hidden によって非表示になった要素には適用されません)。
この記事は、クリックによる拡大と縮小の効果を実現するためのjquery の具体的な方法についてです。 これが、困っている友人に役立つことを願っています。
以上がjqueryを使用してクリックの拡大および縮小効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。