基于jquery的滚动菜单(滚动条)的实现.

本来是打算做一个jquery插件, 只是本人水平属于那种欠扁级别的, 最近又比较忙, 没有时间学习jquery的插件开发, 所以, 做这么个小东西, 供大家玩乐, 呵呵.

index.html是示例
scripts下的scrollable.js是这个小东西的js(写的很烂, 没有什么参考价值的.)

网络昵称: selfimpr
个人博客: http://blog.csdn.net/lgg201
E-mail: [email protected]
声明: 任何形式的转载请保留原作者信息.

过两天打包发网上...

目录结构

root/

images/

button_center.gif

button_left.gif

button_right.gif

scrollable_left.gif

scrollable_right.gif

scripts/

jquery-1.3.2-min.js

scrollable.js

styles/

scrollable.css

index.html

readme.txt

jquery-1.3.2-min.js这个就是jquery的文件, 引进来就可以了.

再不多说了, 直接上代码:

scrollable.js源代码:

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', '26px') .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; }); }

scrollable.css样式源代码:

.ui-scrollable{width: 800px; height: 26px;} .ui-scrollable-left{float: left; background: url(../images/scrollable_left.gif) no-repeat 0 0; width: 10px; height: inherit; cursor: hand;} .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-right{float: left; background: url(../images/scrollable_right.gif) no-repeat 0 0; width: 10px; height: inherit; cursor: hand;}

index.html演示代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jquery.ui.scrollable</title> <link type="text/css" href="styles/scrollable.css" mce_href="styles/scrollable.css" rel="stylesheet" /> <mce:script type="text/javascript" src="scripts/jquery-1.3.2.min.js" mce_src="scripts/jquery-1.3.2.min.js"></mce:script> <mce:script type="text/javascript" src="scripts/scrollable.js" mce_src="scripts/scrollable.js"></mce:script> <mce:style type="text/css"><!-- .author-information{background: #BBBBBB; width: 500px; height: 100px; margin-bottom: 20px; text-align: left; padding: 5px 5px;} .author-information-label{clear: both; float: left; color: white; width: 80px; text-align: right; margin: 3px 0;} .author-information-information{color: blue; font-weight: bold; float: left; text-align: left; width: 420px; margin: 3px 0;} .scrollable-render{} .button{cursor: hand;} .button:hover > * {background-position: 0 -42px;} .button_left{float: left; background: url(images/button_left.gif) no-repeat 0 0; width: 4px; height: 26px;} .button_center{float: left; background: url(images/button_center.gif) repeat-x 0 0; width: 80px; text-align: center} .button_right{float: left; background: url(images/button_right.gif) no-repeat 0 0; width: 4px; height: 26px;} --></mce:style><style type="text/css" mce_bogus="1">.author-information{background: #BBBBBB; width: 500px; height: 100px; margin-bottom: 20px; text-align: left; padding: 5px 5px;} .author-information-label{clear: both; float: left; color: white; width: 80px; text-align: right; margin: 3px 0;} .author-information-information{color: blue; font-weight: bold; float: left; text-align: left; width: 420px; margin: 3px 0;} .scrollable-render{} .button{cursor: hand;} .button:hover > * {background-position: 0 -42px;} .button_left{float: left; background: url(images/button_left.gif) no-repeat 0 0; width: 4px; height: 26px;} .button_center{float: left; background: url(images/button_center.gif) repeat-x 0 0; width: 80px; text-align: center} .button_right{float: left; background: url(images/button_right.gif) no-repeat 0 0; width: 4px; height: 26px;}</style> <mce:script type="text/javascript"><!-- $(function() { scrollable('#scrollable_content', '#scrollable_render', { }, function(originalPosition, newPosition) { return true; }); }); // --></mce:script> </head> <body> <center> <div class="author-information"> <div class="author-information-label">网络昵称:</div><div class="author-information-information">selfimpr</div> <div class="author-information-label">个人博客:</div><div class="author-information-information"><a href="http://blog.csdn.net/lgg201" mce_href="http://blog.csdn.net/lgg201">http://blog.csdn.net/lgg201</a></div> <div class="author-information-label">E-mail:</div><div class="author-information-information"><a href="mailto:lgg860911@yahoo.com.cn" mce_href="mailto:lgg860911@yahoo.com.cn">lgg860911@yahoo.com.cn</a></div> <div class="author-information-label">声明:</div><div class="author-information-information">任何形式的转载请保留原作者信息.</div> </div> <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>

index.html演示效果图: