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 相关文章推荐
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 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+JS实现大规模数据提交的方法
2015/07/02 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
python选择排序算法实例总结
2015/07/01 Python
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
Python实现Event回调机制的方法
2019/02/13 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
Python字符串的修改方法实例
2019/12/19 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
大学同学聚会邀请函
2014/01/19 职场文书
银行简历自我评价
2014/02/11 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
总经理检讨书
2014/09/15 职场文书
2014年村官工作总结
2014/11/24 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
2015年中秋寄语
2015/07/31 职场文书
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android