communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Jquery UI震动效果实现原理及步骤_jquery

Jquery UI震动效果实现原理及步骤_jquery

WBOY
Libérer： 2016-05-16 17:42:26
original
1173 Les gens l'ont consulté

如果你想你的博客页面某些部分引起读者的注意，你可以使这些部分震动，如广告，今天这篇文章将介绍怎样使你的页面中的元素震动起来。

要达到这个目的我们需要使用到Jquery和Jquery UI。
首先让我创建一个震动块，可以是图片，也可以是普通的dom元素，如div、span等，把元素的id命名为shake，这里可以任意命名。

我们用图片如下：

复制代码 代码如下:

Jquery UI震动效果实现原理及步骤_jquery

Jquery UI没有现成的使元素震动的方法，我们需要借助于effect方法来实现，语法如下：
复制代码 代码如下:

effect('shake', options, speed);

参数options（这里有三个参数）：
•times：指定元素震动次数
•distance：指定元素震动幅度
•direction：指定元素震动方向
下面是具体实现方法，设置震动3次，每500ms调用一次震动：
复制代码 代码如下:

function interval() {
$('#shake').effect('shake', { times:3 }, 100);
}
$(document).ready(function() {
var shake = setInterval(interval, 500);
});


这里我引入了最新版的。
下面附上完整代码
复制代码 代码如下:





<script> <BR>function interval() { <BR>$('#shake').effect('shake', { times:3 }, 100); <BR>} <BR>$(document).ready(function() { <BR>var shake = setInterval(interval, 500); <BR>}); <BR></script>

jQuery Shake Effect


jQuery Shake Effect







Jquery UI震动效果实现原理及步骤_jquery



Étiquettes associées：
ui choc
source：php.cn
Article précédent：js中eval()函数和trim()去掉字符串左右空格应用_javascript技巧 Article suivant：js用Date对象处理时间实现思路及代码_基础知识
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Désactiver l'interface utilisateur Swagger sur la plate-forme API J'essaie de désactiver SwaggerUI, ou plus précisément, parce que je souhaite que nous le f...
Depuis 2024-04-04 17:56:57
0
1
324
J'ai du mal à supprimer des objets profonds Mon composant Vue utilise un objet à l'intérieur d'un objet pour afficher des éléments. Lo...
Depuis 2024-04-03 21:48:14
0
1
302
La mise en page dans Next.js obscurcit le contenu de la page J'essaie d'utiliser la navigation inférieure de Material-ui (https://mui.com/material-ui/r...
Depuis 2024-04-02 19:42:19
0
1
275
Importation manquante de l'icône de recherche Material-UI importReactfrom'react'import{Search}from"@material-ui/icons/Search"constApp=()=&...
Depuis 2024-04-02 13:22:44
0
2
389
Créer une barre de navigation similaire à la page d'accueil de Toast UI Ma source d'inspiration, j'ai voulu réaliser une barre de navigation comme celle-ci : Page...
Depuis 2024-04-01 18:34:38
0
1
240
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal