jQuery 导航列表 弹性背景
2016-12-10 10:19
295 查看
前言
本文借助 jquery.movebg.js 实现网页导航列表的左右弹性背景。包括以下:
1、引入 jquery-1.7.2.min.js
2、引入 jquery.movebg.js
3、编写 menus.js,在这里可以设置滑块大小、反弹距离、移动和反弹速度。
4、编写 Menus.css,在这里只是对列表进行了简单样式美化。
5、编写 index.jsp
预览
代码
1、index.jsp 代码<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <title>jQuery 弹性背景 导航栏</title> </head> <script src="http://www.lanrenzhijia.com/ajaxjs/1.7.2/jquery-1.7.2.min.js"></script> <script src="jquery.movebg.js"></script> <script type="text/javascript" src="menus.js" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="Menus.css" /> </head> <body> <div class="wraper"> <div class="nav"> <ul> <li class="nav-item cur"><a href="#">我的首页</a></li> <li class="nav-item"><a href="#">我的作业</a></li> <li class="nav-item"><a href="#">我的考勤</a></li> <li class="nav-item"><a href="#">我的通知</a></li> <li class="nav-item"><a href="#">我的资料</a></li> </ul> <!--移动的滑动--> <div class="move-bg"></div> <!--移动的滑动 end--> </div> </div> </body> </html>
2、menus.js 代码
$(function() { $(".nav").movebg({ width : 140/* 滑块的大小 */, extra : 40/* 额外反弹的距离 */, speed : 300/* 滑块移动的速度 */, rebound_speed : 400 /* 滑块反弹的速度 */}); })
3、Menus.css 代码
@CHARSET "UTF-8"; * { margin: 0; padding: 0; list-style: none; text-decoration: none; font-size: 18px; } /* 正文 */ .wraper { width: 960px; margin: auto auto; } .nav { background: orange; position: relative; width: 100%; height: 50px; overflow: hidden } .nav-item { position: relative; float: left; width: 140px; height: 50px; line-height: 50px; text-align: center; font-size: 14px; z-index: 1; } .nav-item a { display: block; height: 50px; color: black; } .nav-item a:hover { color: white; } .move-bg { display: none; position: absolute; left: 0; top: 0; width: 140px; height: 50px; background: #99cccc; z-index: 0 }
源码
点我点我相关文章推荐
- jQuery实现背景弹性滚动的导航效果
- 使用jQuery开发超酷带有背景波浪动画的单页面网站导航菜单
- jQuery弹性滑动导航菜单
- css+jquery导航列表
- jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
- jQuery三级下拉列表导航菜单代码分享
- jquery+Handler实现淘宝收藏列表导航功能
- jquery背景跟随鼠标滑动导航
- jQuery弹性模态窗口导航菜单
- jQuery弹性滑动导航菜单
- (2015/10/5)jQuery实现鼠标悬停背景翻转的黑色导航菜单代码(状态:未完成)
- jQuery弹性滑动导航菜单实现思路及代码
- JQuery实现鼠标滑过显示导航下拉列表
- JQUERY HOVER鼠标悬停导航菜单滑动展开弹性下拉菜单
- 背景弹性滚动的导航效果
- jQuery实现简单的导航按钮焦点背景更换(代替css hover)以及弹出子菜单 我的第一篇博文
- jquery导航插件制作二级下拉菜单列表1
- jQuery弹性滑动导航菜单
- jQuery实现的背景动态变化导航菜单效果
- jquery背景跟随鼠标滑动导航