<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JQuery左右滚动菜单特效</title> <script language="javascript" type="text/javascript" src="https://www.jb51.net/jquery-1.4.2.min.js"></script> <script language="javascript" type="text/javascript" src="https://www.jb51.net/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></div> <div> <div> <div></div> <div>菜单一</div> <div></div> </div> <div> <div></div> <div>菜单二</div> <div></div> </div> <div> <div></div> <div>菜单三</div> <div></div> </div> <div> <div></div> <div>菜单四</div> <div></div> </div> <div> <div></div> <div>菜单五</div> <div></div> </div> <div> <div></div> <div>菜单六</div> <div></div> </div> <div> <div></div> <div>菜单七</div> <div></div> </div> <div> <div></div> <div>菜单八</div> <div></div> </div> <div> <div></div> <div>菜单九</div> <div></div> </div> <div> <div></div> <div>菜单十</div> <div></div> </div> <div> <div></div> <div>菜单一</div> <div></div> </div> <div> <div></div> <div>菜单二</div> <div></div> </div> <div> <div></div> <div>菜单三</div> <div></div> </div> <div> <div></div> <div>菜单四</div> <div></div> </div> <div> <div></div> <div>菜单五</div> <div></div> </div> <div> <div></div> <div>菜单六</div> <div></div> </div> <div> <div></div> <div>菜单七</div> <div></div> </div> <div> <div></div> <div>菜单八</div> <div></div> </div> <div> <div></div> <div>菜单九</div> <div></div> </div> <div> <div></div> <div>菜单十</div> <div></div> </div> </div> </center> </body> </html>
JQuery实现左右滚动菜单特效(2)
内容版权声明：除非注明，否则皆为本站原创文章。