效果图 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Scrollable</title> <mce:script type="text/javascript"><!-- resizeCallback = function() { var containerStyle = document.getElementById('scrollable_container').style; var containerNewWidth = document.body.clientWidth - 32; containerStyle.width = containerNewWidth + 'px'; document.getElementById('scrollable_content').style.left = '0px'; } window.onresize = resizeCallback; var scroll = false; function scrollToRight(speed, ele) { var container = ele.nextSibling; var content = container.firstChild; var containerLeft = container.offsetLeft - 16; var contentLeft = content.offsetLeft; var minus_result = containerLeft - contentLeft; speed = minus_result > speed ? speed : (minus_result > 0 ? minus_result : 0); if(scroll && minus_result > 0) { content.style.left = contentLeft + speed; setTimeout(function(){scrollToRight(speed, ele)}, 50); } } function scrollToLeft(speed, ele) { var container = ele.previousSibling; var content = container.firstChild; var containerRight = container.offsetWidth; var contentRight = content.offsetLeft + content.offsetWidth; var minus_result = contentRight - containerRight; speed = minus_result > speed ? speed : (minus_result > 0 ? minus_result : 0); if(scroll && minus_result > 0) { content.style.left = content.offsetLeft - speed; setTimeout(function(){scrollToLeft(speed, ele)}, 50); } } var contentWidth = 0; // --></mce:script> <mce:style type="text/css"><!-- body{background: #778899;} .author-information{background: #BBBBBB; width: 500px; height: 150px; text-align: left; padding: 0 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{float: left; margin-right: 5px; width: 100%; background: url(images/button_content.gif) repeat-x;} .scrollable-left-button{float: left; background: url(images/scrollable_navigate_arrow_left.gif) no-repeat 0 0; width: 16px; height: 26px; cursor: hand;} .scrollable-left-button:hover{background-position: 0 -26px;} .scrollable-container{float: left; position: relative; height: 26px; overflow: hidden;} .scrollable-content{float: left; position: relative; height: 26px; overflow: hidden;} .scrollable-button-item{float: left;} .scrollable-button-item:hover span{color: #E8E8E8; height: 16px; line-height: 16px;} .scrollable-button-item:hover .scrollable-button-item-content{height: 16px; margin: 3px 2px; padding: 1px 0; border-left: 1px solid #4586A6; border-right: 1px solid #4586A6; border-bottom: 1px solid #4586A6;} .scrollable-button-item-content{float: left; background: url(images/button_content.gif) repeat-x; height: 26px; text-align: center; line-height: 26px;} .scrollable-button-item-content span{float: left; font-size: 12px; font-weight: bolder; color: #FBFBFB; text-align: center; padding: 0 3px; padding-top: 2px; cursor: hand;} .scrollable-button-item-separator{float: left; background: url(images/button_separator.gif) no-repeat 0 0; width: 2px; height: 26px;} .scrollable-right-button{float: left; background: url(images/scrollable_navigate_arrow_right.gif) no-repeat 0 0; width: 16px; height: 26px; cursor: hand;} .scrollable-right-button:hover{background-position: 0 -26px;} --></mce:style><style type="text/css" mce_bogus="1"> body{background: #778899;} .author-information{background: #BBBBBB; width: 500px; height: 150px; text-align: left; padding: 0 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{float: left; margin-right: 5px; width: 100%; background: url(images/button_content.gif) repeat-x;} .scrollable-left-button{float: left; background: url(images/scrollable_navigate_arrow_left.gif) no-repeat 0 0; width: 16px; height: 26px; cursor: hand;} .scrollable-left-button:hover{background-position: 0 -26px;} .scrollable-container{float: left; position: relative; height: 26px; overflow: hidden;} .scrollable-content{float: left; position: relative; height: 26px; overflow: hidden;} .scrollable-button-item{float: left;} .scrollable-button-item:hover span{color: #E8E8E8; height: 16px; line-height: 16px;} .scrollable-button-item:hover .scrollable-button-item-content{height: 16px; margin: 3px 2px; padding: 1px 0; border-left: 1px solid #4586A6; border-right: 1px solid #4586A6; border-bottom: 1px solid #4586A6;} .scrollable-button-item-content{float: left; background: url(images/button_content.gif) repeat-x; height: 26px; text-align: center; line-height: 26px;} .scrollable-button-item-content span{float: left; font-size: 12px; font-weight: bolder; color: #FBFBFB; text-align: center; padding: 0 3px; padding-top: 2px; cursor: hand;} .scrollable-button-item-separator{float: left; background: url(images/button_separator.gif) no-repeat 0 0; width: 2px; height: 26px;} .scrollable-right-button{float: left; background: url(images/scrollable_navigate_arrow_right.gif) no-repeat 0 0; width: 16px; height: 26px; cursor: hand;} .scrollable-right-button:hover{background-position: 0 -26px;} </style> </head> <body> <div class="scrollable"> <div id="scrollable_left_button" class="scrollable-left-button" οnmοuseοver="scroll=true;scrollToRight(7, event.srcElement);" οnmοuseοut="scroll=false;" οnmοusedοwn="scroll=true;scrollToRight(14, event.srcElement);" οnmοuseup="scroll=false;" ></div> <div id="scrollable_container" class="scrollable-container"> <div id="scrollable_content" class="scrollable-content"> <!-- 如果是动态界面, 一般是这个地方循环输出item, 循环的时候根据字号, 字数以及间隔宽度计算每个菜单的长度 比如, 我之前项目中使用下面代码进行菜单生成和长度计算, 每个字12px的这里按13px计算刚好, 加的8, 其中左右3px的padding以及2px的间隔(separator): <c:forEach var="menu" items="${menus}"> <mce:script type="text/javascript"><!-- contentWidth += '${menu.title }'.length * 13 + 8; // --></mce:script> <div class="scrollable-button-item"> <div class="scrollable-button-item-content"><span>菜单</span></div> <div class="scrollable-button-item-separator"></div> </div> </c:froEach> --> <div class="scrollable-button-item"> <div class="scrollable-button-item-content"><span>测试的菜单一</span></div> <div class="scrollable-button-item-separator"></div> </div> <div class="scrollable-button-item"> <div class="scrollable-button-item-content"><span>测试的菜单二</span></div> <div class="scrollable-button-item-separator"></div> </div> <div class="scrollable-button-item"> <div class="scrollable-button-item-content"><span>测试的菜单三</span></div> <div class="scrollable-button-item-separator"></div> </div> <div class="scrollable-button-item"> <div class="scrollable-button-item-content"><span>测试的菜单四</span></div> <div class="scrollable-button-item-separator"></div> </div> <div class="scrollable-button-item"> <div class="scrollable-button-item-content"><span>测试的菜单五</span></div> <div class="scrollable-button-item-separator"></div> </div> <div class="scrollable-button-item"> <div class="scrollable-button-item-content"><span>测试的菜单六</span></div> <div class="scrollable-button-item-separator"></div> </div> <div class="scrollable-button-item"> <div class="scrollable-button-item-content"><span>测试的菜单七</span></div> <div class="scrollable-button-item-separator"></div> </div> <div class="scrollable-button-item"> <div class="scrollable-button-item-content"><span>测试的菜单八</span></div> <div class="scrollable-button-item-separator"></div> </div> <div class="scrollable-button-item"> <div class="scrollable-button-item-content"><span>测试的菜单九</span></div> <div class="scrollable-button-item-separator"></div> </div> <div class="scrollable-button-item"> <div class="scrollable-button-item-content"><span>测试的菜单十</span></div> <div class="scrollable-button-item-separator"></div> </div> <div class="scrollable-button-item"> <div class="scrollable-button-item-content"><span>测试的菜单一</span></div> <div class="scrollable-button-item-separator"></div> </div> <div class="scrollable-button-item"> <div class="scrollable-button-item-content"><span>测试的菜单二</span></div> <div class="scrollable-button-item-separator"></div> </div> <div class="scrollable-button-item"> <div class="scrollable-button-item-content"><span>测试的菜单三</span></div> <div class="scrollable-button-item-separator"></div> </div> <div class="scrollable-button-item"> <div class="scrollable-button-item-content"><span>测试的菜单四</span></div> <div class="scrollable-button-item-separator"></div> </div> <div class="scrollable-button-item"> <div class="scrollable-button-item-content"><span>测试的菜单五</span></div> <div class="scrollable-button-item-separator"></div> </div> <div class="scrollable-button-item"> <div class="scrollable-button-item-content"><span>测试的菜单六</span></div> <div class="scrollable-button-item-separator"></div> </div> <div class="scrollable-button-item"> <div class="scrollable-button-item-content"><span>测试的菜单七</span></div> <div class="scrollable-button-item-separator"></div> </div> <div class="scrollable-button-item"> <div class="scrollable-button-item-content"><span>测试的菜单八</span></div> <div class="scrollable-button-item-separator"></div> </div> <div class="scrollable-button-item"> <div class="scrollable-button-item-content"><span>测试的菜单九</span></div> <div class="scrollable-button-item-separator"></div> </div> <div class="scrollable-button-item"> <div class="scrollable-button-item-content"><span>测试的菜单十</span></div> <div class="scrollable-button-item-separator"></div> </div> </div> </div> <div id="scrollable_right_button" class="scrollable-right-button" οnmοuseοver="scroll=true;scrollToLeft(7, event.srcElement);" οnmοuseοut="scroll=false;" οnmοusedοwn="scroll=true;scrollToLeft(14, event.srcElement);" οnmοuseup="scroll=false;"></div> </div> <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:lgg860911@yahoo.com.cn" mce_href="mailto:lgg860911@yahoo.com.cn">lgg860911@yahoo.com.cn</a></div> <div class="author-information-label">声明:</div><div class="author-information-information">任何形式的转载请保留原作者信息.</div> <div class="author-information-label">欢迎访问:</div><div class="author-information-information"><a href="http://www.heyjava.com" mce_href="http://www.heyjava.com">http://www.heyjava.com</a></div> </div> </center> </body> </html> <mce:script type="text/javascript"><!-- //这里设置的730就是上面计算出来的总长度, 加10是为了hover时候字体变大宽度也可以适应. document.getElementById('scrollable_content').style.width = (1720 + 10) + 'px'; resizeCallback(); // --></mce:script> 相关图片: 左按钮: 右按钮: 菜单背景: 菜单间隔: