So verwenden Sie JQuery, um den linken und rechten Erweiterungs- und Kontraktionseffekt von Text zu erzielen-HTML-Kenntnisse-php.cn

So verwenden Sie JQuery, um den linken und rechten Erweiterungs- und Kontraktionseffekt von Text zu erzielen

藏色散人

Freigeben： 2018-12-19 09:44:54

Original

6715 Leute haben es durchsucht

jquery kann die jQuery-animate()-Methode verwenden, um den linken und rechten Erweiterungs- und Verkleinerungseffekt von Text zu implementieren, wenn auf eine Schaltfläche geklickt wird. Die Query-animate()-Methode kann ähnliche Effekte wie slideUp() simulieren. und slideDown().

So verwenden Sie JQuery, um den linken und rechten Erweiterungs- und Kontraktionseffekt von Text zu erzielen

Nun, im vorherigen Artikel habe ich Ihnen auch die Methode zur Verwendung von jquery vorgestellt, um den Effekt zum Erweitern und Verkleinern von Klicks zu erzielen (oben und unten).

Jetzt werden wir weiterhin die Codebeispiele kombinieren, um Ihnen die jquery-Methode vorzustellen, um den linken und rechten Erweiterungs- und Kontraktionseffekt von Text zu erzielen.

Das Codebeispiel lautet wie folgt:

<!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>

Nach dem Login kopieren

Wenn wir auf die Schaltfläche „Schließen“ klicken, wird die Breite des Div, das den Text enthält, durch animate() Methode, bis der Klick erreicht ist. Animationseffekt verkleinern.

Wenn wir auf die Schaltfläche „Erweitern“ klicken, wird auch die Methode animate() verwendet, aber dieses Mal wird das Div mit einer Breite von 0 auf seine ursprüngliche Größe zurückgesetzt, um den Animationseffekt des Klickens zu erzielen expandieren.

Der Effekt ist wie folgt:

So verwenden Sie JQuery, um den linken und rechten Erweiterungs- und Kontraktionseffekt von Text zu erzielen

animate()-Methode führt eine benutzerdefinierte Animation eines CSS-Eigenschaftensatzes durch.

Diese Methode ändert ein Element durch CSS-Stile von einem Zustand in einen anderen. Die Werte der CSS-Eigenschaften ändern sich schrittweise, sodass Sie animierte Effekte erstellen können.

Nur numerische Werte können animiert werden (z. B. „margin:30px“). Zeichenfolgenwerte können nicht animiert werden (z. B. „Hintergrundfarbe: Rot“).

Dieser Artikel ist eine Einführung in die JQuery-Methode, um den Animationseffekt der Texterweiterung und -kontraktion zu erzielen. Ich hoffe, dass er auch für Freunde hilfreich ist, die ihn benötigen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JQuery, um den linken und rechten Erweiterungs- und Kontraktionseffekt von Text zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!