移動端tab切換滑動效果touchslide
阿新 • • 發佈:2018-12-16
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no"> <meta name="copyright" content=""> <meta name="Keywords" content=""> <meta name="description" content=""> <title>TouchSlide左迴圈滑動 </title> </head> <script src="../TouchSlide.1.1.js"></script> <style type="text/css"> /* css 重置 */ body, p, input, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form { margin: 0; padding: 0; list-style: none; vertical-align: middle; font-weight:normal; } img { border:0; margin: 0; padding: 0; } body { color: #000; -webkit-user-select: none; } a{text-decoration:none;color:#000;} body{ background:#f4f4f4; } #content{background:#fff; } .tabBox .hd{ height:40px; line-height:40px; padding:0 10px; font-size:20px; background:#f4f4f4; position:relative; } .tabBox .hd ul{ position:absolute; height:41px; top:0; overflow:hidden; } .tabBox .hd ul li{ float:left; padding:0 10px; color:#666; display:block; } .tabBox .hd ul .on{ border-bottom:2px solid #F5AB38; } .tabBox .bd li{ height:333px; line-height:333px; } </style> <body> <div id="leftTabBox" class="tabBox"> <div class="hd"> <ul> <li>國內</li> <li>國際</li> <li>時事</li> </ul> </div> <div class="bd"> <ul> <li>官方明確感染H7N9高危人群</li> </ul> <ul> <li>日:瀋陽軍區部隊開赴中朝邊境</li> </ul> <ul> <li>農業佔GDP低政府支援力度大</li> </ul> </div> </div> <script type="text/javascript"> TouchSlide({ slideCell:"#leftTabBox",effect:"leftLoop" }); </script> </body> </html>