JQuery实现左右滚动菜单特效

JQuery实现左右滚动菜单特效

经过了半天的时间，这个使用JQuery开发出来的左右滚动菜单功能也算是完成了，暂时还没有发现错误的现象。现在把代码完整的代码拿出来分享！ scrollable.js JQuery左右滚动菜单特效脚本代码引用片段： scrollable = function(content, render, options, 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左右滚动菜单特效就是这个样子了，自己觉得还行，希望能帮到一些有需要的朋友。

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息