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左右滚动菜单特效就是这个样子了,自己觉得还行,希望能帮到一些有需要的朋友。