jqueryを使用してクリックの拡大および縮小効果を実現する方法-HTMLの知識-php.cn

jqueryを使用してクリックの拡大および縮小効果を実現する方法

藏色散人

リリース： 2019-05-11 17:57:50

オリジナル

12385 人が閲覧しました

長いテキストを読むとき、私たちは通常、展開ボタンまたは折りたたみボタンをクリックします。この効果は明らかにユーザーの向上に役立ちます。経験。次に、jQuery を使用してクリックによる拡大と縮小の効果を実現し、上下方向の拡大と非表示の効果を実現するには、jQuery の slideUp() メソッドと slideDown() メソッドを使用します。

jqueryを使用してクリックの拡大および縮小効果を実現する方法

ここでは、具体的なコード例に基づいて、クリックによる拡大と縮小の効果を実現する 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() メソッドは、スライド効果を使用して非表示の選択要素を表示します。

最終的な効果は次のとおりです。

jqueryを使用してクリックの拡大および縮小効果を実現する方法