コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > Jquery UIの振動エフェクトの実装原理とsteps_jquery

Jquery UIの振動エフェクトの実装原理とsteps_jquery

WBOY
リリース： 2016-05-16 17:42:26
オリジナル
1174 人が閲覧しました

ブログ ページの特定の部分に読者の注意を引き付けたい場合は、広告などの部分を振動させることができます。今日の記事では、ページ内の要素を振動させる方法を紹介します。

この目的を達成するには、Jquery と Jquery UI を使用する必要があります。
まず、シェイク ブロックを作成します。これは、画像または div、span などの通常の dom 要素で、要素の ID にシェイクという名前を付けることができます。

次のように画像を使用します:

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

< ;img src="http://jqueryui.com/jquery-wp-content/主題/jquery/images/logo-jquery-ui.png" id="shake"/> >
Jquery UI には要素を振動させる既製のメソッドがありません。これを実現するにはエフェクト メソッドを使用する必要があります。構文は次のとおりです:


コードをコピーします コードは次のとおりです:
effect('shake', options, Speed);


パラメータ オプション (3 つあります)ここでのパラメータ）：
・回：要素が揺れる回数を指定
・距離：要素の振動振幅を指定
・方向：要素の振動方向を指定
以下となります。具体的な実装方法は、振動を 3 回設定し、500ms ごとに振動を呼び出します:


コードをコピー コードは次のとおりです。
関数 interval() {
$('#shake').effect('shake', { 回:3 }, 100);
}
$(ドキュメント) ).ready(function() {
var shade = setInterval(interval, 500);
});


ここでは最新バージョンをインポートしました。

完全なコードは以下に添付されています

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


著者別の最新記事
最新の問題
API プラットフォームで Swagger UI を無効にする SwaggerUI を無効にしようとしています。より正確には、SwaggerUI を非運用環境にのみ提供したいからです。このリンクを参照しましたが、何も起こりませんでした。私の a...
から 2024-04-04 17:56:57
0
1
324
奥まったものを取り除くのに苦労する 私の Vue コンポーネントは、オブジェクト内のオブジェクトを使用して要素を表示します。ページ上のボタンをクリックすると、ネストされたオブジェクトの 1 つを削除したいと考えていま...
から 2024-04-03 21:48:14
0
1
302
Next.js のレイアウトによりページのコンテンツが見えにくくなる Next.js アプリケーションのレイアウトとして、マテリアル ui (https://mui.com/material-ui/react-bottom-navigation/) ...
から 2024-04-02 19:42:19
0
1
275
マテリアル UI 検索アイコンのインポートがありません importReactfrom'react'import{Search}from"@material-ui/icons/Search"constApp=()=&...
から 2024-04-02 13:22:44
0
2
389
トースト UI ホームページに似たナビゲーション バーを作成する 私のインスピレーションの源は、次のようなナビゲーション バーを作りたいと思っていました。 Toastui ホームページ 私がやったこと これを実現するために、できる限りコピーしよう...
から 2024-04-01 18:34:38
0
1
240
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート