ホームページ ウェブフロントエンド jsチュートリアル jQuery_jqueryをベースにしたテキストボックスの拡大縮小と上下移動機能の実装

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

May 16, 2016 pm 04:30 PM
jquery テキストボックス ズーム

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

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; < span class = "down"; down</span>                                                                                                                                                                              
水力発電コスト ハイドロパワートナー Fa Safinsha 分散型リラクゼーションソファ
トナーが飛んでいるときソファヘアソファヘア
水力発電コスト ハイドロパワートナー Fa Safinsha 分散型リラクゼーションソファ
トナーが飛んでいるときソファヘアソファヘア
                                                                                                                                                                               




CSS コード:





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

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

iPhone の Safari ズームの問題: これで解決します iPhone の Safari ズームの問題: これで解決します Apr 20, 2024 am 08:08 AM

Safari でズーム レベルを制御できない場合、作業が困難になることがあります。したがって、Safari がズームアウトしているように見える場合は、それが問題である可能性があります。 Safari でのこの小さなズームの問題を解決する方法をいくつか紹介します。 1. カーソル拡大率:Safari メニューバーの「表示」>「カーソル拡大率」を選択します。これにより、カーソルが画面上でより見やすくなり、制御が容易になります。 2. マウスを移動します。これは簡単に聞こえるかもしれませんが、マウスを画面上の別の場所に移動するだけで、マウスが自動的に通常のサイズに戻ることがあります。 3. キーボード ショートカットを使用する 解決策 1 – ズーム レベルをリセットする Safari ブラウザから直接ズーム レベルを制御できます。ステップ 1 – Safari を使用している場合

Wordでページを並べて拡大縮小する方法 Wordでページを並べて拡大縮小する方法 Mar 19, 2024 pm 07:19 PM

Word文書を使ってファイルを編集する場合、ページ数が多く、並べて表示して全体の効果を確認したいのですが、操作方法が分からず、長時間スクロールしなければならないことがよくあります。ページごとに表示します。あなたも同様の状況に遭遇したことがあるかどうかはわかりませんが、実際、Word のズーム ページを並べて設定する方法を学べば、現時点では簡単に解決できます。以下、見て一緒に学びましょう。まず、Word 文書内に新しいページを作成して開き、区別しやすくするために簡単なコンテンツを入力します。 2. たとえば、ワードズームと並べて表示を実現したい場合は、図に示すように、メニューバーで[表示]を見つけ、表示ツールオプションで[複数ページ]を選択する必要があります。 3. [複数ページ] を見つけて、クリックします。

Word 文書編集のヒント: 2 ページのコンテンツを 1 ページにまとめる Word 文書編集のヒント: 2 ページのコンテンツを 1 ページにまとめる Mar 25, 2024 pm 06:06 PM

Microsoft Word 文書では、特に用紙を節約する必要がある場合や両面文書を印刷する必要がある場合に、2 ページのコンテンツを 1 ページに結合する状況がよく発生します。この目標を達成するための一般的な方法をいくつか以下に紹介します。方法 1: ページの余白を調整する まず Word 文書を開き、メニュー バーの [ページ レイアウト] オプションを見つけます。クリックすると、ページ レイアウト設定メニューがポップアップ表示されます。ここでは、上下左右の余白を含むページの余白を調整できます。一般に、上下の余白を小さくすると、コンテンツが 1 ページ内に収まるようになります。味わうことができます

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常​​、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエスト メソッドを使用した具体的なコード例です。まず、jQuery ライブラリ ファイルが含まれていることを確認してから、$.ajax({u

jQueryで要素の高さ属性を削除するにはどうすればよいですか? jQueryで要素の高さ属性を削除するにはどうすればよいですか? Feb 28, 2024 am 08:39 AM

jQueryで要素の高さ属性を削除するにはどうすればよいですか?フロントエンド開発では、要素の高さ属性を操作する必要が生じることがよくあります。要素の高さを動的に変更する必要がある場合や、要素の高さ属性を削除する必要がある場合があります。この記事では、jQuery を使用して要素の高さ属性を削除する方法と、具体的なコード例を紹介します。 jQuery を使用して高さ属性を操作する前に、まず CSS の高さ属性を理解する必要があります。 height 属性は要素の高さを設定するために使用されます

Excelの表全体を拡大・縮小する方法 Excelの表全体を拡大・縮小する方法 Mar 20, 2024 pm 05:16 PM

コンピュータ技術、ネットワーク技術、およびソフトウェア技術の発展により、オフィスオートメーションに大きな展望がもたらされました。現在のオフィス業務プロセスはすべて電子的に実行できるため、作業時間を大幅に節約できます。Excel テーブルは一般的にソフトウェア操作で使用されます。紙や組版の問題に基づいて、Excel テーブル全体を拡大または縮小する必要がある場合があります。設定がある場合は、私たちのニーズを満たすことができる操作方法があれば、次のコースを見てみましょう。 1. まず Excel ソフトウェアを開き、次の図に示すように関連情報を入力します。 2. 次に、右下隅のアイコンをクリックして左または右に移動すると、次の図に示すように、プラス記号は拡大し、マイナス記号は縮小することができます。 3. 2 番目の方法では、Ctrl + マウス ホイールを使用することもできます。

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: &lt

jQuery を使用してすべての a タグのテキスト コンテンツを変更する jQuery を使用してすべての a タグのテキスト コンテンツを変更する Feb 28, 2024 pm 05:42 PM

タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。

See all articles