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 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
JS实现判断有效的数独算法示例
Feb 25 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 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
一个php作的文本留言本的例子(三)
2006/10/09 PHP
php adodb连接不同数据库
2009/03/19 PHP
php类中private属性继承问题分析
2012/11/01 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
Vue.use源码分析
2017/04/22 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
Python日志处理模块logging用法解析
2020/05/19 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
世界上最大的二手相机店:KEN
2017/05/17 全球购物
DOM和JQuery对象有什么区别
2016/11/11 面试题
中国梦读书活动总结
2014/07/10 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
关于工作经历的证明书
2014/10/11 职场文书
医院合作意向书范本
2015/05/08 职场文书
小学运动会宣传稿
2015/07/23 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技