jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果


Posted in Javascript onAugust 25, 2015

本文实例讲述了jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果。分享给大家供大家参考。具体如下:

这里演示基于jquery实现的动画菜单,内含四种效果的网站菜单,第一种是不带效果的传统导航菜单,第二种是带有图形滚动背景的菜单,第三种是由右向左背景滚动的菜单,第四种则是背景色渐变的网站菜单,每一种都很精彩,喜欢Js菜单的可模仿借鉴一下。

运行效果截图如下:

jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>jQuery动态背景导航菜单</title>
<style type="text/css">
h2{clear: both;padding-top: 20px;}
ul{list-style: none;margin: 0;padding: 0;}
li{float: left;width: 100px;margin: 0;padding: 0;text-align: center;}
li a{display: block;padding: 5px 10px;height: 100%;color: #FFF;text-decoration: none;border-right: 1px solid #FFF;}
li a{background: url(images/bg2.jpg) repeat 0 0;}
li a: hover, li a: focus, li a: active{background-position: -150px 0;}
#a a{background: url(images/bg.jpg) repeat -20px 35px;}
#b a{background: url(images/bg2.jpg) repeat 0 0;}
#c a{background: url(images/bg3.jpg) repeat 0 0;}
#d a{background: url(images/bg4.jpg) repeat 0 0;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
(function($) {
 $.extend($.fx.step,{
  backgroundPosition: function(fx) {
  if (fx.state === 0 && typeof fx.end == 'string') {
  var start = $.curCSS(fx.elem,'backgroundPosition');
  start = toArray(start);
  fx.start = [start[0],start[2]];
  var end = toArray(fx.end);
  fx.end = [end[0],end[2]];
  fx.unit = [end[1],end[3]];
   }
  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];
  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]];
  }
 }
 });
})(jQuery);
</script>
<script type="text/javascript">
$(function(){
 $('#a a')
  .css( {backgroundPosition: "-20px 35px"} )
  .mouseover(function(){
   $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
  })
  .mouseout(function(){
   $(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
    $(this).css({backgroundPosition: "-20px 35px"})
   }})
  })
 $('#b a')
  .css( {backgroundPosition: "0 0"} )
  .mouseover(function(){
   $(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
  })
  .mouseout(function(){
   $(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
    $(this).css({backgroundPosition: "0 0"})
   }})
  })
 $('#c a')
  .css( {backgroundPosition: "0 0"} )
  .mouseover(function(){
   $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
  })
  .mouseout(function(){
   $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
  })
 $('#d a')
  .css( {backgroundPosition: "0 0"} )
  .mouseover(function(){
   $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
  })
  .mouseout(function(){
   $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
  })
});
</script>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<h1>jQuery Background Position</h1>
<h2>Example 0: No Script</h2>
 <ul id="noscript">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
<h2>Example A: Top down</h2>
 <ul id="a">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
<h2>Example B: Right left</h2>
 <ul id="b">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
<h2>Example C: Fade 1-colour</h2>
 <ul id="c">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
<h2>Example D: Fade 2-colour</h2>
 <ul id="d">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
</body>
</html>

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

Javascript 相关文章推荐
JQuery 写的个性导航菜单
Dec 24 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 #Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 #Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 #Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 #Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 #Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 #Javascript
js文本框走动跑马灯效果代码分享
Aug 25 #Javascript
You might like
获得Google PR值的PHP代码
2007/01/28 PHP
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
php给数组赋值的实例方法
2019/09/26 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
在Windows8上的搭建Python和Django环境
2014/07/03 Python
详解Python3.1版本带来的核心变化
2015/04/07 Python
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
详解Python实现进度条的4种方式
2020/01/15 Python
python绘制动态曲线教程
2020/02/24 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
求职者应聘的自我评价
2013/10/16 职场文书
专科毕业生自我鉴定
2013/12/01 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
学校安全教育制度
2014/01/31 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
商务代表岗位职责
2015/02/15 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书