首页 > 代码库 > 移动网页左右手势滑动切换Tab项 demo
移动网页左右手势滑动切换Tab项 demo
<!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
移动网页左右手势滑动切换Tab项 demo
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。