JQuery实现左右滚动菜单特效
经过了半天的时间，这个使用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左右滚动菜单特效就是这个样子了，自己觉得还行，希望能帮到一些有需要的朋友。
本文地址：https://www.stayed.cn/item/26144
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)