JQuery实现左右滚动菜单特效

scrollable = function(content, render, options, beforeScroll) {  /*   * @author: selfimpr   * @blog: http://blog.csdn.net/lgg201   * @e-mail: lgg860911@yahoo.com.cn   *   * 注意:   *  1. content必须自己指定宽度. 如果其中的元素使用块元素, 请使用float: left向左浮动.   *  2. 使用时, 尽量自定义样式, 由于本人水平欠佳, 不能作出更加通用的东西, 呵呵.   *   * 参数解释   * content: 内容元素, 可以是选择器或JQUERY封装的DOM元素   * render: 渲染到的目标容器, 可以是选择器或JQUERY封装的DOM元素   * options: 选项   *  scrollable_class: 整体scrollable的外框架样式 , 默认: ui-scrollable   *  scrollable_left_class: 左按钮的样式, 默认: ui-scrollable-left   *  scrollable_container_class: 内容容器的样式, 默认: ui-scrollable-container   *  scrollable_right_class: 右按钮的样式, 默认: ui-scrollable-right   *  delay: 鼠标放上或点击按钮时两次移动之间的时间间隔, 整数   *  speed: 鼠标放上按钮时, 一次移动的距离, 整数   *  speedup: 鼠标点下按钮时, 一次移动的距离, 整数   *  resizeEvent: 是否监听窗口改变大小的事件, 布尔值,   *   监听窗口改变大小时, 在刷新页面后, 感觉显示有点别扭, 所以默认了false   * beforeScroll: 内容滚动时候的事件回调方法.   *  接受参数(两个对象): 第一个是滚动前内容左右位置, 第二个是滚动后内容左右位置.   *  注意: 该事件可以使内容不受边界限制的滚动.   */  options.scrollable_class = options.scrollable_class || 'ui-scrollable';  options.scrollable_left_class = options.scrollable_left_class || 'ui-scrollable-left';  options.scrollable_container_class = options.scrollable_container_class || 'ui-scrollable-container';  options.scrollable_right_class = options.scrollable_right_class || 'ui-scrollable-right';  options.leftText = options.leftText || '';  options.rightText = options.rightText || '';  options.delay = options.delay || 20;  options.speed = options.speed || 5;  options.speedup = options.speedup || 10;  options.resizeEvent = options.resizeEvent || false;    var render = (typeof render == 'string' ? $(render) : render);  var content = (typeof content == 'string' ? $(content) : content);  var scrollable = $('<div></div>')      .attr('id', 'scrollable_' + content.attr('id'))      .attr('className', options.scrollable_class);    var left = $('<div></div>')     .attr('id', 'scrollable_left_' + content.attr('id'))     .attr('className', options.scrollable_left_class);  left.text(options.leftText);    var container = $('<div></div>')      .attr('id', 'scrollable_container_' + content.attr('id'))      .attr('className', options.scrollable_container_class);    content.css('line-height', '29px')    .css('position', 'relative')    .css('left', '0px')    .css('overflow', 'hidden')    .css('float', 'left');    var right = $('<div></div>')     .attr('id', 'scrollable_right_' + content.attr('id'))     .attr('className', options.scrollable_right_class);  right.text(options.rightText);    show = function() {   scrollable.appendTo(render);   container.appendTo(scrollable);   left.css('display', '');   right.css('display', '');   content.appendTo(container);   left.prependTo(scrollable);   right.appendTo(scrollable);   if(content.width() <= container.width() + 20) {    scrollable.remove('.' + options.scrollable_left_class);    scrollable.remove('.' + options.scrollable_right_class);    left.css('display', 'none');    right.css('display', 'none');    container.width(content.width());    scrollable.width(container.width());   }   container.position = {left: container.css('left').substr(0, -2)}   container.position.right = container.position.left + container.width();   content.position = {left: new Number(content.css('left').substr(0, -2))}   content.position.right = content.position.left + content.width();  };    show();    var originalBroswerWidth = document.body.clientWidth;  window.onresize = function() {   if(options.resizeEvent) {    var newBroswerWidth = document.body.clientWidth;    var percent = newBroswerWidth / originalBroswerWidth;    container.width(container.width() * percent);    scrollable.width(container.width() + left.width() + right.width());    show();   }   originalBroswerWidth = document.body.clientWidth;  }    var scroll = false;  move = function(distance) {   var newLeft = content.position.left + distance;   var newRight = content.position.right + distance;   if(distance > 0 && newLeft > container.position.left) {    distance = container.position.left - content.position.left;    scroll = false;   } else if(distance < 0 && newRight < container.position.right) {    distance = content.position.right - container.position.right;    scroll = false;   }   newLeft = content.position.left + distance;   newRight = content.position.right + distance;   scorll = beforeScroll ? beforeScroll(     {left: content.position.left, right: content.position.right},     {left: newLeft, right: newRight}) : scroll;   if(scroll) {    content.css('left', newLeft + 'px');    content.position.left += distance;    content.position.right += distance;    setTimeout('move(' + distance + ')', options.delay);   }  }  left.mouseover(function() {   scroll = true;   move(options.speed);  });  right.mouseover(function() {   scroll = true;   move(-options.speed);  });  left.mouseout(function() {   scroll = false;  });  right.mouseout(function() {   scroll = false;  });  left.mousedown(function() {   scroll = true;   move(options.speedup);  });  right.mousedown(function() {   scroll = true;   move(-options.speedup);  });  left.mouseup(function() {   scroll = false;  });  right.mouseup(function() {   scroll = false;  }); }

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JQuery左右滚动菜单特效</title> <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script><script language="javascript" type="text/javascript" src="scrollable.js"></script><style type="text/css">.scrollable-render{} .button{cursor: hand;} .button:hover > * {background-position: 0 -42px;} .button_left{float: left; background: url(menu_out_left.gif) no-repeat 0 0; width: 4px; height: 26px;} .button_center{float: left; background: url(menu_out_bj.gif) repeat-x 0 0; width: 80px; text-align: center} .button_right{float: left; background: url(menu_out_right.gif) no-repeat 0 0; width: 4px; height: 26px;}.ui-scrollable{width: 800px; height: 29px;} .ui-scrollable-container{float: left; width: 780px; height: inherit; position: relative; overflow: hidden; border-bottom: 1px solid #DDDDDD;} .ui-scrollable-content{float: left; width: 1770px; height: inherit;}.ui-scrollable-left{float: left; background: url(scrollable_left_out.gif) no-repeat 0 0; width: 10px; height:29px; cursor: hand;} .ui-scrollable-right{float: left; background: url(scrollable_right_out.gif) no-repeat 0 0; width: 10px; height:29px; cursor: hand;}.ui-scrollable-left:hover{ float: left; background: url(scrollable_left_on.gif) no-repeat 0 0; width: 10px; height:29px; cursor: hand;}.ui-scrollable-right:hover{float: left; background: url(scrollable_right_on.gif) no-repeat 0 0; width: 10px; height:29px; cursor: hand;} </style> <script type="text/javascript">$(function() {  scrollable('#scrollable_content', '#scrollable_render', {     }, function(originalPosition, newPosition) {   return true;  }); }); </script> </head> <body> <center> <div id="scrollable_render" class="scrollable-render"></div>  <div id="scrollable_content" class="ui-scrollable-content">   <div class="button">    <div class="button_left"></div>    <div class="button_center">菜单一</div>    <div class="button_right"></div>   </div>   <div class="button">    <div class="button_left"></div>    <div class="button_center">菜单二</div>    <div class="button_right"></div>   </div>   <div class="button">    <div class="button_left"></div>    <div class="button_center">菜单三</div>    <div class="button_right"></div>   </div>   <div class="button">    <div class="button_left"></div>    <div class="button_center">菜单四</div>    <div class="button_right"></div>   </div>   <div class="button">    <div class="button_left"></div>    <div class="button_center">菜单五</div>    <div class="button_right"></div>   </div>   <div class="button">    <div class="button_left"></div>    <div class="button_center">菜单六</div>    <div class="button_right"></div>   </div>   <div class="button">    <div class="button_left"></div>    <div class="button_center">菜单七</div>    <div class="button_right"></div>   </div>   <div class="button">    <div class="button_left"></div>    <div class="button_center">菜单八</div>    <div class="button_right"></div>   </div>   <div class="button">    <div class="button_left"></div>    <div class="button_center">菜单九</div>    <div class="button_right"></div>   </div>   <div class="button">    <div class="button_left"></div>    <div class="button_center">菜单十</div>    <div class="button_right"></div>   </div>   <div class="button">    <div class="button_left"></div>    <div class="button_center">菜单一</div>    <div class="button_right"></div>   </div>   <div class="button">    <div class="button_left"></div>    <div class="button_center">菜单二</div>    <div class="button_right"></div>   </div>   <div class="button">    <div class="button_left"></div>    <div class="button_center">菜单三</div>    <div class="button_right"></div>   </div>   <div class="button">    <div class="button_left"></div>    <div class="button_center">菜单四</div>    <div class="button_right"></div>   </div>   <div class="button">    <div class="button_left"></div>    <div class="button_center">菜单五</div>    <div class="button_right"></div>   </div>   <div class="button">    <div class="button_left"></div>    <div class="button_center">菜单六</div>    <div class="button_right"></div>   </div>   <div class="button">    <div class="button_left"></div>    <div class="button_center">菜单七</div>    <div class="button_right"></div>   </div>   <div class="button">    <div class="button_left"></div>    <div class="button_center">菜单八</div>    <div class="button_right"></div>   </div>   <div class="button">    <div class="button_left"></div>    <div class="button_center">菜单九</div>    <div class="button_right"></div>   </div>   <div class="button">    <div class="button_left"></div>    <div class="button_center">菜单十</div>    <div class="button_right"></div>   </div>  </div></center> </body> </html>