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;
varrender=(typeofrender=='string'?$(render):render);
varcontent=(typeofcontent=='string'?$(content):content);
varscrollable=$('<div></div>')
.attr('id','scrollable_'+content.attr('id'))
.attr('className',options.scrollable_class);
varleft=$('<div></div>')
.attr('id','scrollable_left_'+content.attr('id'))
.attr('className',options.scrollable_left_class);
left.text(options.leftText);
varcontainer=$('<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');
varright=$('<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:newNumber(content.css('left').substr(0,-2))}
content.position.right=content.position.left+content.width();
};
show();
varoriginalBroswerWidth=document.body.clientWidth;
window.onresize=function(){
if(options.resizeEvent){
varnewBroswerWidth=document.body.clientWidth;
varpercent=newBroswerWidth/originalBroswerWidth;
container.width(container.width()*percent);
scrollable.width(container.width()+left.width()+right.width());
show();
}
originalBroswerWidth=document.body.clientWidth;
}
varscroll=false;
move=function(distance){
varnewLeft=content.position.left+distance;
varnewRight=content.position.right+distance;
if(distance>0&&newLeft>container.position.left){
distance=container.position.left-content.position.left;
scroll=false;
}elseif(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>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>JQuery左右滚动菜单特效</title>
<scriptlanguage="javascript"type="text/javascript"src="jquery-1.4.2.min.js"></script>
<scriptlanguage="javascript"type="text/javascript"src="scrollable.js"></script>
<styletype="text/css">
.scrollable-render{}
.button{cursor:hand;}
.button:hover>*{background-position:0-42px;}
.button_left{float:left;background:url(menu_out_left.gif)no-repeat00;width:4px;height:26px;}
.button_center{float:left;background:url(menu_out_bj.gif)repeat-x00;width:80px;text-align:center}
.button_right{float:left;background:url(menu_out_right.gif)no-repeat00;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:1pxsolid#DDDDDD;}
.ui-scrollable-content{float:left;width:1770px;height:inherit;}
.ui-scrollable-left{float:left;background:url(scrollable_left_out.gif)no-repeat00;width:10px;height:29px;cursor:hand;}
.ui-scrollable-right{float:left;background:url(scrollable_right_out.gif)no-repeat00;width:10px;height:29px;cursor:hand;}
.ui-scrollable-left:hover{float:left;background:url(scrollable_left_on.gif)no-repeat00;width:10px;height:29px;cursor:hand;}
.ui-scrollable-right:hover{float:left;background:url(scrollable_right_on.gif)no-repeat00;width:10px;height:29px;cursor:hand;}
</style>
<scripttype="text/javascript">
$(function(){
scrollable('#scrollable_content','#scrollable_render',{
},function(originalPosition,newPosition){
returntrue;
});
});
</script>
</head>
<body>
<center>
<divid="scrollable_render"class="scrollable-render"></div>
<divid="scrollable_content"class="ui-scrollable-content">
<divclass="button">
<divclass="button_left"></div>
<divclass="button_center">菜单一</div>
<divclass="button_right"></div>
</div>
<divclass="button">
<divclass="button_left"></div>
<divclass="button_center">菜单二</div>
<divclass="button_right"></div>
</div>
<divclass="button">
<divclass="button_left"></div>
<divclass="button_center">菜单三</div>
<divclass="button_right"></div>
</div>
<divclass="button">
<divclass="button_left"></div>
<divclass="button_center">菜单四</div>
<divclass="button_right"></div>
</div>
<divclass="button">
<divclass="button_left"></div>
<divclass="button_center">菜单五</div>
<divclass="button_right"></div>
</div>
<divclass="button">
<divclass="button_left"></div>
<divclass="button_center">菜单六</div>
<divclass="button_right"></div>
</div>
<divclass="button">
<divclass="button_left"></div>
<divclass="button_center">菜单七</div>
<divclass="button_right"></div>
</div>
<divclass="button">
<divclass="button_left"></div>
<divclass="button_center">菜单八</div>
<divclass="button_right"></div>
</div>
<divclass="button">
<divclass="button_left"></div>
<divclass="button_center">菜单九</div>
<divclass="button_right"></div>
</div>
<divclass="button">
<divclass="button_left"></div>
<divclass="button_center">菜单十</div>
<divclass="button_right"></div>
</div>
<divclass="button">
<divclass="button_left"></div>
<divclass="button_center">菜单一</div>
<divclass="button_right"></div>
</div>
<divclass="button">
<divclass="button_left"></div>
<divclass="button_center">菜单二</div>
<divclass="button_right"></div>
</div>
<divclass="button">
<divclass="button_left"></div>
<divclass="button_center">菜单三</div>
<divclass="button_right"></div>
</div>
<divclass="button">
<divclass="button_left"></div>
<divclass="button_center">菜单四</div>
<divclass="button_right"></div>
</div>
<divclass="button">
<divclass="button_left"></div>
<divclass="button_center">菜单五</div>
<divclass="button_right"></div>
</div>
<divclass="button">
<divclass="button_left"></div>
<divclass="button_center">菜单六</div>
<divclass="button_right"></div>
</div>
<divclass="button">
<divclass="button_left"></div>
<divclass="button_center">菜单七</div>
<divclass="button_right"></div>
</div>
<divclass="button">
<divclass="button_left"></div>
<divclass="button_center">菜单八</div>
<divclass="button_right"></div>
</div>
<divclass="button">
<divclass="button_left"></div>
<divclass="button_center">菜单九</div>
<divclass="button_right"></div>
</div>
<divclass="button">
<divclass="button_left"></div>
<divclass="button_center">菜单十</div>
<divclass="button_right"></div>
</div>
</div>
</center>
</body>
</html>
当然，我们还需要引用JQuery框架文件，我这里用的是jquery-1.4.2.min.js，自己可以在网上搜索下载，我就不上传到这里了。整个JQuery左右滚动菜单特效就是这个样子了，自己觉得还行，希望能帮到一些有需要的朋友。