JQuery实现左右滚动菜单特效

2024-12-20 23:22:31

经过了半天的时间，这个使用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 = $('<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 ? 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;
 });
}

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

当然，我们还需要引用JQuery框架文件，我这里用的是jquery-1.4.2.min.js，自己可以在网上搜索下载，我就不上传到这里了。整个JQuery左右滚动菜单特效就是这个样子了，自己觉得还行，希望能帮到一些有需要的朋友。

jquery固定底网站底部菜单效果

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>固定底(顶)部菜单&
jQuery实现固定在网页顶部的菜单效果代码

本文实例讲述了jQuery实现固定在网页顶部的菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery的固定在页面顶部的菜单,获取要定位元素距离浏览器顶部的距离,滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-top-fixed-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W
jQuery实现有动画淡出效果的二级折叠菜单代码

本文实例讲述了jQuery实现有动画淡出效果的二级折叠菜单代码.分享给大家供大家参考,具体如下: 这里介绍jQuery实现有动画淡出效果的二级折叠菜单代码,相当不错,因考虑功能的实现,所以没有怎么美化,不过这样也好,可以给大家更多的空间来修饰美化,想怎么弄就怎么弄了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-dh-flash-fade-in-out-2-menu-demo/ 具体代码如下: <!DOCTYPE html PU
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)

自己试着写了下: 复制代码代码如下: $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $(".nav").offset().top; //滚动条事件 $(window).scroll(function(){ //获取滚动条的滑动距离 var scroH = $(this).scrollTop(); //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定 if(scroH>=navH){ $(".nav&
jQuery实现可用于博客的动态滑动菜单完整实例

本文实例讲述了jQuery实现可用于博客的动态滑动菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery1.3.2的动态滑动菜单特效代码,常用于博客,鼠标滑过菜单,菜单会不断伸出,貌似很漂亮,我比较喜欢,发上来供大家使用或学习参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blog-move-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//
jQuery实现Tab菜单滚动切换的方法

本文实例讲述了jQuery实现Tab菜单滚动切换的方法.分享给大家供大家参考.具体如下: 这是一款jQuery实现让你的Tab菜单滚动的代码,先运行一下看看效果咋样?是不是超不错,让你的网页变得灵动起来,不再静止,学习jquery的朋友也可作为范例来参考吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tab-menu-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W
jQuery实现可关闭固定于底（顶）部的工具条菜单效果

本文实例讲述了jQuery实现可关闭固定于底(顶)部的工具条菜单效果.分享给大家供大家参考,具体如下: 这是一款可关闭始终在页面底部的工具条菜单,浮动在页面顶部的大家见的比较多了,本款从形式上来说与其它的没什么差别,只是浮动在页面的最底部,带一关闭按钮,一般来说,此效果可用作广告条.网站提示以及一些需要用户特别注意的地方. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fixed-buttom-adv-line-codes/ 具体
jquery toolbar与网页浮动工具条具体实现代码

jquery 实现toolbar与网页浮动工具条jQuery实现方法 /* 基本StructureWe'll更新index.php教程的HTML代码和对新闻联播style.css教程中的CSS代码. 我们建立了一个固定的面板(ID为工具栏组)两个浮动方面,我们将在第二个步骤与他们的图标和提示气泡(左),一个快速菜单和"隐藏按钮列表"(添加到隐藏工具栏). 我们还可以期待一个"显示按钮",它是有用的,当面板隐藏,我们要重新激活它.基于这个原因,我们添加id为toolb
基于jQuery实现的菜单切换效果

这是一个非常流畅的菜单展示效果,应用在亚马逊上,当你上下移动鼠标的时候,二级菜单会非常轻快的切换,没有任何延时,给用户如滑丝般的感觉.这种效果借助于一款jQuery插件menu-aim,本文将结合实例讲解如何实现速度超快的菜单效果. HTML 首先建立主菜单,我们借用电商网站常见的商品分类.其html结构代码如下,其中我们用到了html5的data-submenu-id属性设置,这在插件调用时非常有用. <div class="active"> <ul class=&
jquery实现的简单二级菜单效果代码

本文实例讲述了jquery实现的简单二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的二级菜单,研究了这么多天,才学会用jquery写一个菜单,也算是对自己的鼓励吧,自我感觉这个菜单很不错,欢迎朋友们指点江山. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-2l-menu-style-demo-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3
jquery实现仿Flash的横向滑动菜单效果代码

本文实例讲述了jquery实现仿Flash的横向滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一个仿Flash的jquery滑动菜单,横向,延时效果明显,如果觉得延时太长的话,自己可以修改参数,通过这个菜单主要是想向大家掌握一些jQuery生成动画的技巧,同时这也是jquery强大功能的体现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-flash-style-move-menu-codes/ 具体代码如下: <!

JQuery实现左右滚动菜单特效

相关推荐

随机推荐