JQuery makes menu scrolling effect left and right

This time I will bring you the effect of JQuery making the left and right scrolling of the menu. What are the things to pay attention to when using JQuery to make the left and right scrolling of the menu? The following is a practical case, let's take a look. After half a day, the left and right scrolling menu function developed using JQuery has been completed, and no errors have been found yet. Now take out the complete code and share it!

scrollable.js

JQuery left and right scrolling menu special effects script code reference fragment:

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 left and right scroll menu special effects page code reference fragment:

<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>

Of course, we also need to quote JQuery framework file, I use

jquery-1.4.2.min.js

here. You can search and download it on the Internet, but I will not upload it here. The entire JQuery left and right scrolling menu effect looks like this. I think it's okay, and I hope it can help some friends in need. I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

jQuery implements the function of enlarging the picture when the mouse passes over it

jQuery implements the sliding switching of pictures (with code)

The above is the detailed content of JQuery makes menu scrolling effect left and right. For more information, please follow other related articles on the PHP Chinese website!