ホームページ > 記事 > 毎日のプログラミング > jqueryを使ってテキストの左右の拡大・縮小効果を実現する方法
jqueryを使ってテキストの左右の拡大・縮小効果を実現する方法
- 藏色散人オリジナル
- 2018-12-17 14:59:486618ブラウズ
jquery は、jQuery animate() メソッドを使用して、ボタンがクリックされたときにテキストの拡大と縮小の効果を実現できます。Query animate() メソッドは、slideUp() および slideDown() と同様の効果をシミュレートできます。 ）。
ということで、前回の記事では、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() メソッド CSS プロパティ セットのカスタム アニメーションを実行します。
このメソッドは、CSS スタイルを通じて要素をある状態から別の状態に変更します。 CSS プロパティの値が徐々に変化し、アニメーション効果を作成できます。 アニメーションできるのは数値のみです(「margin:30px」など)。文字列値はアニメーション化できません（「background-color:red」など）。 この記事は、テキストの拡大と縮小のアニメーション効果を実現するための jquery メソッドに関するもので、困っている友人に役立つことを願っています。以上がjqueryを使ってテキストの左右の拡大・縮小効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。