首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JQuery实现左右滚动菜单特效

Posted in Javascript onSeptember 28, 2015

 经过了半天的时间，这个使用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实现左右滚动菜单特效

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 关键字屏蔽实现函数
Aug 02 Javascript
javascript使用activex控件的代码
Jan 27 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
Angular中$compile源码分析
Jan 28 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
Angular 4依赖注入学习教程之组件服务注入（二）
Jun 04 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
JS动态日期时间的获取方法
Sep 28 #Javascript
js电话号码验证方法
Sep 28 #Javascript
JavaScript多图片上传案例
Sep 28 #Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 #Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 #Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 #Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 #Javascript
目录管理(1) html5+(1) Get(1) 二维码(2) 磁盘管理(1) 日志(1) 条码(1) Post(1) Word(2) plus.io(1)
You might like
第1次亲密接触PHP5(1)
2006/10/09 PHP
PHP 面向对象实现代码
2009/11/11 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
javascript 二分法(数组array)
2010/04/24 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
基于Python os模块常用命令介绍
2017/11/03 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
python:接口间数据传递与调用方法
2018/12/17 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
html5唤醒APP小记
2019/03/27 HTML / CSS
Net-A-Porter美国官网：全球时尚奢侈品名站
2017/02/11 全球购物
Superdry极度干燥美国官网：英国制造的服装品牌
2018/11/13 全球购物
国际贸易专业个人鉴定
2014/02/22 职场文书
人力资源总监工作说明
2014/03/03 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
销售开票员岗位职责
2015/04/15 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书