ホームページ >ウェブフロントエンド >jsチュートリアル >Jquery UIの振動エフェクトの実装原理とsteps_jquery
Jquery UIの振動エフェクトの実装原理とsteps_jquery
- WBOYオリジナル
- 2016-05-16 17:42:261178ブラウズ
ブログ ページの特定の部分に読者の注意を引き付けたい場合は、広告などの部分を振動させることができます。今日の記事では、ページ内の要素を振動させる方法を紹介します。
この目的を達成するには、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);
});
ここでは最新バージョンをインポートしました。 }
$(ドキュメント) ).ready(function() {
var shade = setInterval(interval, 500);
});
完全なコードは以下に添付されています
コードをコピーします コードは次のとおりです: