jQuery 导航列表弹性背景

来源：互联网发布：大龄软件工程硕士编辑：程序博客网时间：2024/05/12 08:51

前言

本文借助 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}

源码

点我点我

0 0

jQuery 导航列表 弹性背景

前言

预览

代码

源码

jQuery 导航列表弹性背景