JQuery crée un effet de défilement de menu vers la gauche et la droite

Cette fois je vais vous apporter l'effet de JQuery faisant le défilement vers la gauche et la droite du menu. Quelles sont les précautions pour faire défiler le menu vers la gauche et la droite avec JQuery. Voici un cas pratique, jetons un coup d'oeil.

Après une demi-journée, la fonction de menu déroulant gauche et droite développée à l'aide de JQuery est terminée et aucune erreur n'a encore été trouvée. Maintenant, sortez le code complet et partagez-le !

scrollable.js

JQuery menu déroulant gauche et droite fragment de référence du code de script d'effets spéciaux :

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

Extrait de référence du code de la page d'effets spéciaux du menu déroulant gauche et droit de 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>

Bien sûr, nous devons également référencer le fichier du framework JQuery. J'utilise jquery-1.4.2.min.js ici. Vous pouvez le rechercher et le télécharger en ligne, mais je ne le téléchargerai pas. ça ici. L'ensemble de l'effet du menu déroulant gauche et droit de JQuery ressemble à ceci. Je pense que ça va, et j'espère que cela pourra aider certains amis dans le besoin.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

jQuery implémente la fonction d'agrandissement des images lorsque la souris passe dessus

jQuery implémente la commutation coulissante d'image (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!