Home > Article > Web Front-end > Use jQuery to achieve website navigation jitter effect
This article introduces the method of using jQuery to achieve the jitter effect of website navigation. It mainly uses each traversal node and animate custom animation. I hope it will be helpful to friends who are learning jQuery!
Using jQuery to achieve website navigation jitter effect
Knowledge points
1. each traverses nodes
2, animate() custom animation
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>
Run result
When the mouse is placed, it will Constant shaking
// 停止抖动 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>
Run result
The mouse will keep shaking after placing it
This article comes from the js tutorial column, welcome to learn!
The above is the detailed content of Use jQuery to achieve website navigation jitter effect. For more information, please follow other related articles on the PHP Chinese website!