本文實例講述了jquery實現的回旋滾動效果。分享給大家供大家參考，具體如下：
這里分享一款回旋滾動效果，先上效果圖：
具體代碼如下：
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title>jquery-roundabout</title> <style type="text/css"> *{padding:0;margin:0;} body{font:24px tahoma;} ul{list-style:none;margin:100px auto 0;width:500px;height:200px;} li{line-height:200px;height:200px;width:300px;background:#ccc;text-align:center;cursor:pointer;} .roundabout-in-focus{cursor:default;} </style></head><body> <ul class="roundabout"> <li>Block 1</li> <li>Block 2</li> <li>Block 3</li> <li>Block 4</li> <li>Block 5</li> </ul></body></html><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="js/jquery.roundabout.min.js"></script><script type="text/javascript">$(function(){ $('.roundabout').roundabout();});</script>至于 roundabout.js 的代碼可以去官網上下載，這里就不寫了。
官網地址為：http://fredhq.com/projects/roundabout
完整實例代碼點擊此處本站下載。
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery窗口操作技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
