jQuery 如何实现网站导航抖动效果? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
使用 jQuery 实现网站导航抖动效果
知识点
1,each 遍历节点
2, animate() 自定义动画
代码
- <!DOCTYPE html>
- <HTML>
- <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>
- <div>
- <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>
- </div>
- <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>
运行结果
鼠标放上后会不停抖动
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/17484.html