JQuery melaksanakan menu tatal kiri dan kanan effects

Selepas setengah hari, fungsi menu tatal kiri dan kanan yang dibangunkan menggunakan JQuery telah selesai, dan tiada ralat ditemui lagi. Sekarang keluarkan kod lengkap dan kongsikannya!

boleh ditatal.js

JQuery menu tatal kiri dan kanan serpihan rujukan kod skrip kesan khas:

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' &#63; $(render) : render); 
 var content = (typeof content == 'string' &#63; $(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 &#63; 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; 
 }); 
}

Salin selepas log masuk

Default.aspx

JQuery menu tatal kiri dan kanan coretan rujukan kod halaman kesan khas:

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

Salin selepas log masuk

Sudah tentu, kami juga perlu merujuk fail rangka kerja JQuery yang saya gunakan jquery-1.4.2.min.js Anda boleh mencari dan memuat turunnya dalam talian, tetapi saya tidak akan memuat naiknya di sini . Keseluruhan kesan menu tatal kiri dan kanan JQuery kelihatan seperti ini, saya fikir ia tidak mengapa, dan saya harap ia dapat membantu beberapa rakan yang memerlukan.

JQuery melaksanakan menu tatal kiri dan kanan effects_jquery