jquery implements effects such as left and right scrolling, gradient and graphic background scrolling of animated menus

jquery implements effects such as left and right scrolling, gradient and graphic background scrolling of animated menus_jquery

WBOY

Release： 2016-05-16 15:42:56

Original

1371 people have browsed it

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-flash-style-cha-menu-codes/

具体代码如下：

<!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(/(-&#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]];
  }
 }
 });
})(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>

Copy after login

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