简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

JQuery implements left and right scrolling menu effects_jquery

WBOY
Release： 2016-05-16 15:37:42
Original
1280 people have browsed it

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 scroll 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 = $('<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; 
 }); 
}
Copy after login

Default.aspx

JQuery left and right scroll menu special effects page code reference snippet: 

<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>
Copy after login

Of course, we also need to reference the JQuery framework file. I am using jquery-1.4.2.min.js. You can search and download it online, 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.

Related labels：
jquery滚动特效 jquery文字滚动特效 jquery滚动菜单 jquery数字滚动特效
source：php.cn
Previous article：JQuery Ajax implements data query, sorting and paging functions_jquery Next article：jQuery method to get the value of checkboxlist_jquery
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How can I make text turn into a new element (like a divider) when clicked? I'm trying to find a way to make certain text on the page turn into separators/new element...
From 2024-04-04 11:21:03
0
1
3580
Embed/iframe always full height I have embedded several html files that vary in "height". I want the embedded co...
From 2024-03-31 09:50:18
0
1
400
Why does every time I save my Vite React project, a new canvas element is added to the page body instead of replacing the existing canvas element? I'm trying to start learning ThreeJs (I'm also new to Javascript web development). After w...
From 2024-03-30 09:57:49
0
1
396
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！