jqueryを使ってテキストの左右の拡大・縮小効果を実現する方法-HTMLの知識-php.cn

jqueryを使ってテキストの左右の拡大・縮小効果を実現する方法

藏色散人

リリース： 2018-12-19 09:44:54

オリジナル

6689 人が閲覧しました

jquery は、jQuery animate() メソッドを使用して、ボタンがクリックされたときにテキストの拡大と縮小の効果を実現できます。Query animate() メソッドは、slideUp() および slideDown() と同様の効果をシミュレートできます。）。

jqueryを使ってテキストの左右の拡大・縮小効果を実現する方法

ということで、前回の記事では、jqueryを使ってクリックによる拡大・縮小効果を実現する方法を紹介しました (上下) ）。

次に、コード例を組み合わせて、テキスト の左右の拡大および縮小効果を実現する jquery メソッドを紹介します。

コード例は次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jquery实现文字左右展开收缩效果示例</title>
    <style type="text/css">
 .box{
            float:left;
 overflow: hidden;
 background: #f0e68c;
 }

        .box-inner{
            width: 400px;
 padding: 10px;
 border: 1px solid #a29415;
 }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
 $(function () {
            var boxWidth = $(".box").width();
 $(".slide-left").click(function(){
                $(".box").animate({
                    width: 0
 });
 });
 $(".slide-right").click(function(){
                $(".box").animate({
                    width: boxWidth
                });
 });
 });
 </script>
</head>
<body>
<button type="button" class="slide-left">关闭</button>
<button type="button" class="slide-right">展开</button>
<hr>
<div class="box">
    <div class="box-inner">新浪娱乐讯 据台湾媒体报道，2018MAMA香港场14日晚间7点盛大展开颁奖典礼，嘻哈、性感、抒情各种团体
    合作的舞台表演精彩绝伦，《ETtoday》全程独家直播典礼现场，为观众快速整理8大看点，从防弹RM流利的英文演讲开场，到最后防弹内
    心告白曾想解散，全场零冷场。</div>
</div>
</body>
</html>

ログイン後にコピー

閉じるボタンをクリックすると、テキストを含む div の幅が animate()# を通じてゆっくりと 0 に変更されます。 ## クリックに達するまでのメソッド縮小アニメーション効果。

展開ボタンをクリックすると、animate() メソッドも使用されますが、今回は幅 0 の div が元のサイズに復元され、クリックしたときのアニメーション効果が得られます。拡大する。

その効果を次の図に示します。

jqueryを使ってテキストの左右の拡大・縮小効果を実現する方法