jQuery_jqueryをベースにしたテキストボックスの拡大縮小と上下移動機能の実装-jsチュートリアル-php.cn

jQuery_jqueryをベースにしたテキストボックスの拡大縮小と上下移動機能の実装

WBOY

リリース： 2016-05-16 16:30:29

オリジナル

1760 人が閲覧しました

ウェブページをよりクールにし、コメントをよりインタラクティブにしたい場合は、このコードを注意深く研究してください。

jQuery コード:

コードをコピーしますコードは次のとおりです:

$(関数(){
var $comment = $('#comment'); $('.bigger').click(function(){
If(!$comment.is(":animated")){
If($comment.height() //$comment.height($comment.height() 50); $comment.animate({高さ:" =50"},400); }                                                                                                       }); $('.smaller').click(function(){
If(!$comment.is(":animated")){
If($comment.height() > 50){
//$comment.height($comment.height() - 50); $comment.animate({身長:"-=50"},400);                                                                                                                                                                                                             }); $('.up').click(function(){
If(!$comment.is(":animated")){
$comment.animate({scrollTop:"-=50"},400);                                                                                                       }); $('.down').click(function(){
If(!$comment.is(":animated")){
$comment.animate({scrollTop:" =50"},400);                                                                                     }); });

HTML コード:

コードをコピー

コードは次のとおりです:

& Lt; スパンクラス = "大きい" & gt; / スパン & gt; & Lt; スパンクラス = "小さい" & gt;/スパン & gt; & Lt; スパンクラス = "アップ" & gt;/スパン & gt; ＆lt; span class = "down"; down＆lt;/span＆gt;
水力発電コストハイドロパワートナー Fa Safinsha 分散型リラクゼーションソファ
トナーが飛んでいるときソファヘアソファヘア
水力発電コストハイドロパワートナー Fa Safinsha 分散型リラクゼーションソファ
トナーが飛んでいるときソファヘアソファヘア

CSS コード:

コードをコピーします

コードは次のとおりです:

.bigger 、 .down 、 .up 、 .smaller{

背景色: #f1a55c; } コードの使用方法と使用場所についてはここでは説明しません。ご自由にお使いください。