JQuery做出菜單左右滾動效果

這次給大家帶來JQuery做出菜單左右滾動效果，JQuery做出菜單左右滾動的注意事項有哪些，下面就是實戰案例，一起來看一下。

經過了半天的時間，這個使用JQuery開發出來的左右滾動選單功能也算是完成了，暫時還沒有發現錯誤的現象。現在把程式碼完整的程式碼拿出來分享！

scrollable.js

#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 = $('<p></p>') 
     .attr('id', 'scrollable_' + content.attr('id')) 
     .attr('className', options.scrollable_class); 
  
 var left = $('<p></p>') 
    .attr('id', 'scrollable_left_' + content.attr('id')) 
    .attr('className', options.scrollable_left_class); 
 left.text(options.leftText); 
  
 var container = $('<p></p>') 
     .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 = $('<p></p>') 
    .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(&#39;.&#39; + options.scrollable_left_class); 
   scrollable.remove(&#39;.&#39; + options.scrollable_right_class); 
   left.css(&#39;display&#39;, &#39;none&#39;); 
   right.css(&#39;display&#39;, &#39;none&#39;); 
   container.width(content.width()); 
   scrollable.width(container.width()); 
  } 
  container.position = {left: container.css(&#39;left&#39;).substr(0, -2)} 
  container.position.right = container.position.left + container.width(); 
  content.position = {left: new Number(content.css(&#39;left&#39;).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(&#39;left&#39;, newLeft + &#39;px&#39;); 
   content.position.left += distance; 
   content.position.right += distance; 
   setTimeout(&#39;move(&#39; + distance + &#39;)&#39;, 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; 
 }); 
}

#Default.aspx

JQuery左右捲動選單特效頁碼引用片段：

<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>
 <p id="scrollable_render" class="scrollable-render"></p> 
 <p id="scrollable_content" class="ui-scrollable-content"> 
  <p class="button"> 
   <p class="button_left"></p> 
   <p class="button_center">菜单一</p> 
   <p class="button_right"></p> 
  </p> 
  <p class="button"> 
   <p class="button_left"></p> 
   <p class="button_center">菜单二</p> 
   <p class="button_right"></p> 
  </p> 
  <p class="button"> 
   <p class="button_left"></p> 
   <p class="button_center">菜单三</p> 
   <p class="button_right"></p> 
  </p> 
  <p class="button"> 
   <p class="button_left"></p> 
   <p class="button_center">菜单四</p> 
   <p class="button_right"></p> 
  </p> 
  <p class="button"> 
   <p class="button_left"></p> 
   <p class="button_center">菜单五</p> 
   <p class="button_right"></p> 
  </p> 
  <p class="button"> 
   <p class="button_left"></p> 
   <p class="button_center">菜单六</p> 
   <p class="button_right"></p> 
  </p> 
  <p class="button"> 
   <p class="button_left"></p> 
   <p class="button_center">菜单七</p> 
   <p class="button_right"></p> 
  </p> 
  <p class="button"> 
   <p class="button_left"></p> 
   <p class="button_center">菜单八</p> 
   <p class="button_right"></p> 
  </p> 
  <p class="button"> 
   <p class="button_left"></p> 
   <p class="button_center">菜单九</p> 
   <p class="button_right"></p> 
  </p> 
  <p class="button"> 
   <p class="button_left"></p> 
   <p class="button_center">菜单十</p> 
   <p class="button_right"></p> 
  </p> 
  <p class="button"> 
   <p class="button_left"></p> 
   <p class="button_center">菜单一</p> 
   <p class="button_right"></p> 
  </p> 
  <p class="button"> 
   <p class="button_left"></p> 
   <p class="button_center">菜单二</p> 
   <p class="button_right"></p> 
  </p> 
  <p class="button"> 
   <p class="button_left"></p> 
   <p class="button_center">菜单三</p> 
   <p class="button_right"></p> 
  </p> 
  <p class="button"> 
   <p class="button_left"></p> 
   <p class="button_center">菜单四</p> 
   <p class="button_right"></p> 
  </p> 
  <p class="button"> 
   <p class="button_left"></p> 
   <p class="button_center">菜单五</p> 
   <p class="button_right"></p> 
  </p> 
  <p class="button"> 
   <p class="button_left"></p> 
   <p class="button_center">菜单六</p> 
   <p class="button_right"></p> 
  </p> 
  <p class="button"> 
   <p class="button_left"></p> 
   <p class="button_center">菜单七</p> 
   <p class="button_right"></p> 
  </p> 
  <p class="button"> 
   <p class="button_left"></p> 
   <p class="button_center">菜单八</p> 
   <p class="button_right"></p> 
  </p> 
  <p class="button"> 
   <p class="button_left"></p> 
   <p class="button_center">菜单九</p> 
   <p class="button_right"></p> 
  </p> 
  <p class="button"> 
   <p class="button_left"></p> 
   <p class="button_center">菜单十</p> 
   <p class="button_right"></p> 
  </p> 
 </p>
</center> 
</body> 
</html>

當然，我們還需要引用JQuery框架文件，我這裡用的是jquery-1.4.2.min.js，自己可以上網搜尋下載，我就不上傳到這裡了。整個JQuery左右滾動選單特效就是這樣了，自己覺得還行，希望能幫到一些有需要的朋友。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

jQuery實作滑鼠經過時放大圖片功能

jquery實作圖片滑動切換（附程式碼）

#

以上是JQuery做出菜單左右滾動效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！