制作方法
引入文件
<script src="https://www.dowebok.com/js/jquery-1.9.0.min.js"></script> <script src="https://www.dowebok.com/js/jquery.shake.js"></script>
HTML
<div id="nav"> <ul> <li><a href="https://www.dowebok.com/www.dowebok.com" rel="external nofollow" >首页</a></li> <li><a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" >代码</a></li> <li><a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" >素材</a></li> <li><a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" >模板</a></li> </ul> </div>
CSS
body { background-color: #F8F8FF; } #nav, #nav * { margin: 0; padding: 0; } #nav { width: 70%; margin: 1em auto; font: normal 1em/1.4em Microsoft Yahei; } #nav ul { list-style: none; overflow: hidden; background-color: rgb(241, 241, 241); padding: 1em; zoom: 1; } #nav ul li { float: left; width: 10%; text-align: center; cursor: pointer; padding: .3em 0; color: #262626; } #nav ul li:hover { background-color: #D4D4D4; } #nav a { color: #333; text-decoration: none; }
JavaScript
$('#nav li').shake();
注意:抖动效果因人而异,有些人比较反感,且 shake 内存占用不小,所以请谨慎恰当使用,免得使客户流失。
[b2_file link="
百度网盘" name="用jQuery抖动插件shake制作抖动菜单" pass="" code=""]