移动网页左右手势滑动切换Tab项 demo
浏览数：98 /
时间：2015年06月11日
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="themes/css/acss.css" rel="stylesheet" media="screen" type="text/css" /> <link href="themes/css/style.css" rel="stylesheet" media="screen" type="text/css" /> <script src="themes/js/jquery.js" type="text/javascript"></script> <script src="themes/js/common.js" type="text/javascript"></script> <style type="text/css"> body{margin:0;font-family:"microsoft yahei";font-size:13px;line-height:1.5;background:#eee;} .wrap{margin:0 auto 0 auto;} .tabs{height:40px;} .tabs a{display:block;float:left;width:25%;color:#333;text-align:center;background:#eee;line-height:40px;font-size:16px;text-decoration:none;} .tabs a.active{color:#fff;background:#333;border-radius:5px 5px 0px 0px;} .swiper-container{background:#333;height:100%;border-radius:0 0 5px 5px;width:100%;border-top:0;} .swiper-slide{height:100%;width:100%;background:none;color:#fff;} .content-slide{padding:0px;} .content-slide p{text-indent:2em;line-height:1.9;} </style> <link rel="stylesheet" href="themes/css/idangerous.swiper.css"> </head> <body> <div class="w"> <div class="wrap"> <div class="tabs"> <a href="#" hidefocus="true" class="active">首页</a> <a href="#" hidefocus="true">商品分类</a> <a href="#" hidefocus="true">个人中心</a> <a href="#" hidefocus="true">搜索</a> </div> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="content-slide" style="width: 100%;height: 100%;"> <iframe runat="server" src="http://m.vip.com/" width="100%" height="100%"></iframe> </div> </div> <div class="swiper-slide"> <div class="content-slide" style="width: 100%;height: 100%;"> <iframe runat="server" src="http://m.vip.com/classify.html" width="100%" height="100%"></iframe> </div> </div> <div class="swiper-slide"> <div class="content-slide" style="width: 100%;height: 100%;"> <iframe runat="server" src="http://m.vip.com/user.html" width="100%" height="100%"></iframe> </div> </div> <div class="swiper-slide"> <div class="content-slide" style="width: 100%;height: 100%;"> <iframe runat="server" src="http://m.vip.com/cart.html" width="100%" height="100%"></iframe> </div> </div> </div> </div> </div> </div> <div class="go-top"></div> <div class="tools"> <div class="list"> <a class="cart" href=""></a> <a class="user" href=""></a> <a class="product" href=""></a> <a class="home" href=""></a> </div> <span class="control" id="control"></span> </div> <script type="text/javascript" src="themes/js/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="themes/js/idangerous.swiper.min.js"></script> <script type="text/javascript"> var tabsSwiper = new Swiper(‘.swiper-container‘,{ speed:500, onSlideChangeStart: function(){ $(".tabs .active").removeClass(‘active‘); $(".tabs a").eq(tabsSwiper.activeIndex).addClass(‘active‘); } }); $(".tabs a").on(‘touchstart mousedown‘,function(e){ e.preventDefault() $(".tabs .active").removeClass(‘active‘); $(this).addClass(‘active‘); tabsSwiper.swipeTo($(this).index()); }); $(".tabs a").click(function(e){ e.preventDefault(); }); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei‘;"> </div> </body> </html>
能够实现 网页手势左右切换。
源码：http://pan.baidu.com/s/1c04GEbQ
提取码：yj7j
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
