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

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

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

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

 

过两天打包发网上...

 

 

目录结构

 

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: [e-mail] * * 注意: * 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:[e-mail]" mce_href="mailto:[e-mail]">[e-mail]</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演示效果图: