jQuery实现的背景动态变化导航菜单效果

首页

web前端

js教程

jQuery实现的背景动态变化导航菜单效果_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:43 PM

jquery 导航菜单背景

本文实例讲述了jQuery实现的背景动态变化导航菜单效果。分享给大家供大家参考。具体如下：

这里介绍一款使用jQuery插件制作完成的导航菜单，一大特点是，菜单的背景有动态效果，与使用的背景图片完全变换，动态效果是在鼠标悬停时出现，也就是把鼠标放在菜单上的时候，背景即开始滚动起来，看上去漂亮极了，而且兼容性也是相当不错的，推荐给网页设计者使用。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-bg-cha-menu-nav-codes/

具体代码如下：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery动态背景的导航菜单</title>
<script type="text/javascript" src="jquery-1.6.2.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
 var width = 0;
 $('#menu li').each(function() {
  width += $(this).width()+1;
 });
 var padding = parseInt((($('#menu').width() - width) / $('#menu li a').length)/2);
 var pixLeft = ($('#menu').width() - width)-(padding*$('#menu li a').length*2)
 $('#menu li a').each(function(index) {
  if (index+1 != $('#menu li a').length) {
   $(this).css('padding', '0 '+padding+'px');
   $(this).css('background-position', '-' + $(this).position().left + 'px 0');
  } else {
   padding = padding + (pixLeft/2);
   $(this).css('padding', '0 '+padding+'px');
   $(this).css('background-position', '-' + $(this).position().left + 'px 0');
  }
 });
 $('#menu li a').mouseover(function(){ 
   $(this).stop().animate({ backgroundPosition: '-' + $(this).position().left - 129 + 'px 0'}, 2000)
  .mouseout(function(){
   $(this).stop().animate({ backgroundPosition: '-' + $(this).position().left + 'px 0'}, 2000)
  })
 });
});
(function($) {
 if(!document.defaultView || !document.defaultView.getComputedStyle){ // IE6-IE8
  var oldCurCSS = jQuery.curCSS;
  jQuery.curCSS = function(elem, name, force){
   if(name === 'background-position'){
    name = 'backgroundPosition';
   }
   if(name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[ name ]){
    return oldCurCSS.apply(this, arguments);
   }
   var style = elem.style;
   if ( !force && style && style[ name ] ){
    return style[ name ];
   }
   return oldCurCSS(elem, 'backgroundPositionX', force) +' '+ oldCurCSS(elem, 'backgroundPositionY', force);
  };
 }
 var oldAnim = $.fn.animate;
 $.fn.animate = function(prop){
  if('background-position' in prop){
   prop.backgroundPosition = prop['background-position'];
   delete prop['background-position'];
  }
  if('backgroundPosition' in prop){
   prop.backgroundPosition = '('+ prop.backgroundPosition;
  }
  return oldAnim.apply(this, arguments);
 };
 function toArray(strg){
  strg = strg.replace(/left|top/g,'0px');
  strg = strg.replace(/right|bottom/g,'100%');
  strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
  var res = strg.match(/(-&#63;[0-9\.]+)(px|\%|em|pt)\s(-&#63;[0-9\.]+)(px|\%|em|pt)/);
  return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
 }
 $.fx.step. backgroundPosition = function(fx) {
  if (!fx.bgPosReady) {
   var start = $.curCSS(fx.elem,'backgroundPosition');
   if(!start){//FF2 no inline-style fallback
    start = '0px 0px';
   }
   start = toArray(start);
   fx.start = [start[0],start[2]];
   //var end = toArray(fx.options.curAnim.backgroundPosition);
   var end = toArray(fx.options.curAnim == undefined &#63; fx.end : fx.options.curAnim.backgroundPosition);
   fx.end = [end[0],end[2]];
   fx.unit = [end[1],end[3]];
   fx.bgPosReady = true;
  }
  //return;
  var nowPosX = [];
  nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
  nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];  
  fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
 };
})(jQuery);
</script>
<style type="text/css">
html {
 height:100%; 
 min-height:100%;
}
body {
 position:relative;
 margin:0; padding:0;
 font-size:1em;
 font:62.8% Arial, Tahoma, Helvetica, sans-serif;
 min-width:1130px; 
 min-height:100%;
 height:100%; 
 background: #1e1e1d;
 color:#FFFFFF;
}
h1, h2, h3, h4, h5, h6, form, fieldset, dl, ul {margin:0; padding: 0;}
strong, b {font-weight:bold;}
em, i {font-style:italic;}
small {display:block;}
fieldset {border:0;}
img {border:none;}
a {
 color: #FFCC00;
 text-decoration: none;
}
a:hover {
 text-decoration: underline;
}
a:focus
{
 outline-style: none;
}
.go_back {
 position: absolute;
 top: 15px; left: 240px;
 color: #ff0072;
 font-size: 1.6em;
}
#content {
 position: relative;
 top: 100px;
 width:800px; 
 position:relative;
 margin: 0 auto;
}
#menu {
 float: left;
 width: 800px;
 list-style: none;
 line-height: 33px;
 background: url('images/menu_bg1.gif') no-repeat top left;
 border-top: 1px solid #000;
 border-bottom: 1px solid #000;
 margin: 0;
 padding:0;
}
#menu li {
 float: left;
 border-left: 1px solid #000;
}
#menu li a {
 float: left;
 font-size: 1.2em;
 color: #fff;
 border-left: 1px solid #ccc;
 text-decoration: none;
 background: url('images/menu_bg1.gif') no-repeat top left;
}
#menu li a:hover {
 background: url('images/menu_bg_active.gif') no-repeat top left;
}
#menu li:first-child { border: none; }
#menu li:first-child a { border: none; }
</style>
</head>
<body>
<div id="content">
<br />
 <ul id="menu">
  <li><a href="#" title="脚本下载">脚本下载</a></li>
  <li><a href="#" title="网页特效">网页特效</a></li>
  <li><a href="#" title="教程文章">教程文章</a></li>
  <li><a href="#" title="编程类库">编程类库</a></li>
  <li><a href="#" title="最新更新">最新更新</a></li>
 </ul><br />
</div>
</body>
</html>

登录后复制

希望本文所述对大家的jquery程序设计有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程

1662

CakePHP 教程

1419

Laravel 教程

1312

PHP教程

1262

C# 教程

1235

显示更多

Related knowledge

jQuery中如何使用PUT请求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u

ppt背景怎么全部替换 Mar 25, 2024 pm 04:25 PM

PPT背景替换是一种重要的操作，可快速统一演示文稿的视觉风格。通过修改幻灯片母版或使用“格式背景”功能，可以快速替换整个演示文稿的背景。此外，某些PPT版本还提供批量替换功能，可以轻松替换所有幻灯片的背景。在替换背景时，应注意选择与演示文稿主题相符的背景，并确保背景清晰度和分辨率符合要求。

美图秀秀如何换照片背景底色 Apr 08, 2024 pm 03:56 PM

1、打开美图秀秀软件，选择【图片美化】，从相册中导入照片。2、点击底部工具栏的【抠图】，选择【背景替换】功能。3、在【背景】选项中，从纯色方框中挑选所需底色，或上传自定义图片。4、确认选择后，点击【保存】即可完成底色更换。

Go语言的诞生背景与初衷 Apr 04, 2024 am 08:48 AM

Go语言诞生于Google，旨在解决C++的复杂性和并发支持不足的问题。它的初衷是创造一种简洁易学、高效并发、内存安全、跨平台的语言，以提高程序员的生产力，构建可靠可扩展的系统，并促进代码的移植和共享。

jQuery小技巧：快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：&lt

使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：

jQuery如何移除元素的height属性？ Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height属性？在前端开发中，经常会遇到需要操作元素的高度属性的需求。有时候，我们可能需要动态改变元素的高度，而有时候又需要移除元素的高度属性。本文将介绍如何使用jQuery来移除元素的高度属性，并提供具体的代码示例。在使用jQuery操作高度属性之前，我们首先需要了解CSS中的height属性。height属性用于设置元素的高度

了解jQuery中eq的作用及应用场景 Feb 28, 2024 pm 01:15 PM

jQuery是一种流行的JavaScript库，被广泛用于处理网页中的DOM操作和事件处理。在jQuery中，eq()方法是用来选择指定索引位置的元素的方法，具体使用方法和应用场景如下。在jQuery中，eq()方法选择指定索引位置的元素。索引位置从0开始计数，即第一个元素的索引是0，第二个元素的索引是1，依此类推。eq()方法的语法如下：$("s

See all articles

jQuery实现的背景动态变化导航菜单效果_jquery

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题