首页
所有分类
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 相关文章推荐
JS 参数传递的实际应用代码分析
Sep 13 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
使用JavaScript通过前端发送电子邮件
May 22 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 Javascript
React四级菜单的实现
Apr 08 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
Hadoop(1) 云服务器(1) JDK(1) 腾讯云(1) RecyclerView(1) Foreign Key(1) 九宫格(5) 内存池(1) queue(1) TaiShan(1)
You might like
coreseek 搜索英文的问题详解
2013/06/08 PHP
php数组删除元素示例
2014/03/21 PHP
php生成shtml类用法实例
2014/12/09 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
PHP数组函数知识汇总
2016/05/12 PHP
微信支付开发交易通知实例
2016/07/12 PHP
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
Puppet的一些技巧
2018/09/17 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
详解Bootstrap 学习（一）入门
2019/04/12 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
Python import用法以及与from...import的区别
2015/05/28 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
Python 生成器，迭代，yield关键字，send()传参给yield语句操作示例
2019/10/12 Python
python实现随机加减法生成器
2020/02/24 Python
SQL SERVER面试资料
2013/03/30 面试题
物流专业大学生求职信范文
2013/10/28 职场文书
大学生就业协议书范本（适用于公司企业）
2014/10/07 职场文书
2014年创卫工作总结
2014/11/24 职场文书
教师党员个人自我评价
2015/03/04 职场文书
公司2015年终工作总结
2015/05/26 职场文书
培训班开班主持词
2015/07/02 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
一篇文章弄懂Python中的内建函数
2021/08/07 Python
Go获取两个时区的时间差
2022/04/20 Golang