<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>JS 移动端的Tab触屏滑动特效</title> <link rel="stylesheet" href="css/base.css" /> <script type="text/javascript" src="js/TouchSlide.1.0.js"></script> <style> a{text-decoration:none;color:#000;} .tabBox .hd{ height:40px; line-height:40px; padding:0 10px; font-size:20px; background:#F3F3F3; border-top:2px solid #CECECE; } .tabBox .hd ul{ overflow:hidden; } .tabBox .hd ul li{ float:left; margin:0 10px; color:#515151; } .tabBox .hd ul .on{ border-bottom:2px solid #BA2636; color:#BA2636; } .tabBox .hd ul .on a{ display:block;} .tabBox .bd ul{ padding:10px 0 10px 10px; } .tabBox .bd li{ height:33px; line-height:33px; } .tabBox .bd a{ -webkit-tap-highlight-color:rgba(0,0,0,0); } .tabBox .bd li a{ color:#555; } .tabBox .bd .t{ height:85px; overflow:hidden; } .tabBox .bd .t .pic{ width:130px; float:left; } .tabBox .bd .t .con{ margin-left:130px; line-height:20px; } .tabBox .bd .t .con p{ font-size:12px; color:#999; } </style> </head> <body> <div id="leftTabBox" class="tabBox"> <div class="hd"> <ul> <li><a href="#">列表一</a></li> <li><a href="#">列表二</a></li> <li><a href="#">列表三</a></li> </ul> </div> <div class="bd"> <ul> <li class="t"> <div class="pic"><img src="img/wyNewPic.jpg" /></div> <div class="con"> <a class="tit">onestopweb</a> <p>悲回风之摇蕙兮,心冤结而内伤。 物有微而陨性兮,声有隐而先倡。</p> </div> </li> <li><a href="#">阅谁问君诵,水落清香浮1</a></li> <li><a href="#">阅谁问君诵,水落清香浮1</a></li> <li><a href="#">阅谁问君诵,水落清香浮1</a></li> <li><a href="#">阅谁问君诵,水落清香浮1</a></li> <li><a href="#">阅谁问君诵,水落清香浮1</a></li> </ul> <ul> <li><a href="#">阅谁问君诵,水落清香浮2</a></li> <li><a href="#">阅谁问君诵,水落清香浮2</a></li> <li><a href="#">阅谁问君诵,水落清香浮2</a></li> <li><a href="#">阅谁问君诵,水落清香浮2</a></li> <li><a href="#">阅谁问君诵,水落清香浮2</a></li> <li><a href="#">阅谁问君诵,水落清香浮2</a></li> <li><a href="#">阅谁问君诵,水落清香浮2</a></li> <li><a href="#">阅谁问君诵,水落清香浮2</a></li> </ul> <ul> <li><a href="#">阅谁问君诵,水落清香浮3</a></li> <li><a href="#">阅谁问君诵,水落清香浮3</a></li> <li><a href="#">阅谁问君诵,水落清香浮3</a></li> <li><a href="#">阅谁问君诵,水落清香浮3</a></li> <li><a href="#">阅谁问君诵,水落清香浮3</a></li> <li><a href="#">阅谁问君诵,水落清香浮3</a></li> <li><a href="#">阅谁问君诵,水落清香浮3</a></li> <li><a href="#">阅谁问君诵,水落清香浮3</a></li> </ul> </div> </div> <script type="text/javascript">TouchSlide({ slideCell:"#leftTabBox" });</script> </body> </html>
效果图:
扫描二维码关注公众号,回复:
278412 查看本文章