Cet article présente la méthode d'utilisation de jQuery pour obtenir l'effet de gigue de la navigation sur un site Web. Il utilise principalement chaque nœud de traversée et anime une animation personnalisée. J'espère que cela sera utile aux amis qui apprennent jQuery !
Utiliser jQuery pour obtenir un effet de gigue de navigation sur un site Web
Points de connaissances
1 . chacun traverse les nœuds
2. animation personnalisée animate()
code
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; list-style: none; } .box { width: 350px; height: 350px; margin: 100px auto; cursor: pointer; } .box ul li { float: left; width: 80px; height: 80px; text-align: center; border: 1px solid #ccc; box-sizing: border-box; margin: 2px; } .box>ul>li>span { display: block; width: 24px; height: 24px; background: url("images/bg.png") 0 -24px no-repeat; margin: 10px auto; } </style></head><body> <p class="box"> <ul> <li><span></span>百度</li> <li><span></span>淘宝</li> <li><span></span>新浪</li> <li><span></span>网易</li> <li><span></span>搜狐</li> <li><span></span>腾讯</li> <li><span></span>优酷</li> <li><span></span>京东</li> </ul> </p><script type="text/javascript" src="lib/jquery-3.3.1.js"></script><script type="text/javascript"> $(function () { // 1. 展示图片 var $li = $('.box>ul>li'); $li.each(function (index, value) { $(this).children('span').css({ 'background': ' url("images/bg.png") 0 -' + index * 24 + 'px no-repeat' }) }); // 2. 抖动动画 $li.hover(function () { shake(this); }, function () { // 停止抖动 stopShake(this); }); function shake(ele) { // 1. 设置css $(ele).css({ 'position': 'relative' }); // 2. 确定走动的值 var animateLeft = $(ele).css('left') === '10px' ? '-10px' : '10px'; $(ele).animate({ left: animateLeft }, 100, function () { shake(ele); }); } function stopShake(ele) { $(ele).stop(true, false).css({ left: '0' }) } });</script></body></html>
résultat d'exécution
apparaîtra lorsque la souris est placé Continue de trembler
// 停止抖动 stopShake(this); }); function shake(ele) { // 1. 设置css $(ele).css({ 'position': 'relative' }); // 2. 确定走动的值 var animateLeft = $(ele).css('left') === '10px' ? '-10px' : '10px'; $(ele).animate({ left: animateLeft }, 100, function () { shake(ele); }); } function stopShake(ele) { $(ele).stop(true, false).css({ left: '0' }) } });</script></body></html>
Résultat d'exécution
La souris continuera de trembler après l'avoir placée
Cet article est issu de la rubrique tutoriel js , bienvenue pour apprendre !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!