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


Posted in Javascript onAugust 24, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[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 ? 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程序设计有所帮助。

Javascript 相关文章推荐
一个简单的javascript类定义例子
Sep 12 Javascript
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
JavaScript实现前端实时搜索功能
Mar 26 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
详解ES6 系列之异步处理实战
Oct 26 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 #Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 #Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 #Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 #Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 #Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 #Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 #Javascript
You might like
php网页后退不再出现过期
2007/03/08 PHP
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
PHP5 面向对象程序设计
2008/02/13 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
ES6 十大特性简介
2020/12/09 Javascript
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Python callable()函数用法实例分析
2018/03/17 Python
Python 修改列表中的元素方法
2018/06/26 Python
python实现的Iou与Giou代码
2020/01/18 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
Python绘制数码晶体管日期
2021/02/19 Python
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
opencv实现图像平移效果
2021/03/24 Python
经典公益广告词
2014/03/13 职场文书
勾股定理课后反思
2014/04/26 职场文书
担保书范本
2015/01/20 职场文书
2015年服务员工作总结
2015/04/08 职场文书
亲戚关系证明
2015/06/24 职场文书
使用Ajax实现进度条的绘制
2022/04/07 Javascript