zepto.js swipe实现触屏tab菜单

QQ20150430105656

<!DOCTYPE>
<html>
<HEAD>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no” />
<title>jquery特效,html5特效,css3特效,js特效群:184853157</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<script type=”text/javascript” language=”javascript” src=”http://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js”></script>
<style>
@charset “utf-8″;body{text-align:left;font-size:13px;font-family:”宋体”, Arial,Verdana;color:#3E3E3E;margin:0 auto;padding:0;}
div, form, img, ul, ol, li, dl, dt, dd, td, span, a, th, tbody, h1, h2, h3, h4, h5, h6{font-size:12px;font-family:”宋体”, Arial,Verdana;margin:0;padding:0;border:0;text-decoration:none;}
input, select, textarea{font-size:12px;font-family:”宋体”, Arial;}
ul, ul li{list-style:none;list-style-type:none;}
a{color:#9e9e9e;font-size:13px;}
.box_163css{width:100%;overflow:hidden;margin-bottom:10px;}
.top_box{width:100%;position:relative;height:42px;}
.nav_top{float:left;width:100%;height:40px;line-height:40px;background:#ffe35c;box-shadow:0 1px solid #d0b95a inset;border-bottom:2px solid #aca082;text-align:center;}
.nav_top li{width:25%;float:left;font-size:14px;border-bottom:1px solid #ccc;}
.nav_top li.on{color:#c00;}
.nav_mid{width:400%;height:190px;padding-top:10px;-webkit-transform:translate3d(0, 0, 0);}
.nav_mid_b{-webkit-transform:translate3d(1, 0, 10);}
.nav_mid_c{-webkit-transform:translate3d(2, 0, 20);}

.box01{width:25%;text-align:left;height:190px;float:left;line-height:90px;font-size:14px;text-align:center;}
.line{width:25%;height:2px;background:#000;position:absolute;left:0;top:40px;display:block;}
.line::before{display:block;width:0;height:0;position:absolute;left:50%;margin-left:-6px;border:6px solid #000;border-color:transparent transparent #000 transparent;bottom:2px;display:block;content:”;}

.newlist{width:100%;float:left;margin-bottom:10px;}
.newlist li{height:36px;line-height:36px;position:relative;background:#f8f8f8;border-bottom:1px solid #e8e8e9;border-top:1px solid #fff;}
.newlist li:nth-child(1){border-top:none;}
.newlist li a{float:left;text-align:left;text-indent:7px;}
.em_arrow{display:block;width:0;height:0;position:absolute;right:5px;top:10px;border:5px solid #ccc;border-color:transparent transparent transparent #ccc;}
.btn_href{display:inline-block;color:#000;font-size:14px;float:left;margin-left:2%;height:30px;line-height:30px;border-radius:5px;box-shadow:0 1px 1px #dedede inset, 0 1px 1px #fff;background:-webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#e4e4e4));width:96%;}
</style>
</HEAD>
<BODY>
<div class=”box_163css”>
<div class=”top_box”>
<ul class=”nav_top”>
<li class=”on”>新闻</li>
<li>股票</li>
<li>军事</li>
<li>博客</li>
</ul>
<span class=”line”></span> </div>
<div class=”nav_mid”>
<div id=”box” class=”box01″>
<ul class=”newlist”>
<li><em class=”em_arrow”>&nbsp;</em><a href=”###”>詹姆斯32分热火客场输球</a></li>
<li><em class=”em_arrow”>&nbsp;</em><a href=”###”>爵士(21-19)二连胜。艾尔-杰弗森拿下了23分11个篮板</a></li>
<li><em class=”em_arrow”>&nbsp;</em><a href=”###”>热火连续6个客场之旅注定不顺利</a></li>
<li><em class=”em_arrow”>&nbsp;</em><a href=”###”>詹姆斯空中接力上篮,热火以18-12领先</a></li>
</ul>
<a href=”###” class=”btn_href”>进入新闻中心>></a> </div>
<div id=”box” class=”box01″>
<ul class=”newlist”>
<li><em class=”em_arrow”>&nbsp;</em><a href=”###”>今日沪深两市大盘双双高开</a></li>
<li><em class=”em_arrow”>&nbsp;</em><a href=”###”>深成指报9381.69点,上涨65.42点</a></li>
<li><em class=”em_arrow”>&nbsp;</em><a href=”###”>热火连续6个客场之旅注定不顺利</a></li>
<li><em class=”em_arrow”>&nbsp;</em><a href=”###”>詹姆斯空中接力上篮,热火以18-12领先</a></li>
</ul>
<a href=”###” class=”btn_href”>进入股票中心>></a> </div>
<div id=”box” class=”box01″>
<ul class=”newlist”>
<li><em class=”em_arrow”>&nbsp;</em><a href=”###”>日拟派F15战机常驻下地岛机场</a></li>
<li><em class=”em_arrow”>&nbsp;</em><a href=”###”>爵士(21-19)二连胜。艾尔-杰弗森拿下了23分11个篮板</a></li>
<li><em class=”em_arrow”>&nbsp;</em><a href=”###”>热火连续6个客场之旅注定不顺利</a></li>
<li><em class=”em_arrow”>&nbsp;</em><a href=”###”>詹姆斯空中接力上篮,热火以18-12领先</a></li>
</ul>
<a href=”###” class=”btn_href”>进入军事频道>></a> </div>
<div id=”box” class=”box01″>
<ul class=”newlist”>
<li><em class=”em_arrow”>&nbsp;</em><a href=”###”>谭咏麟:坠物竟是我行李</a></li>
<li><em class=”em_arrow”>&nbsp;</em><a href=”###”>南方如何温暖度过寒冷冬天?</a></li>
<li><em class=”em_arrow”>&nbsp;</em><a href=”###”>热火连续6个客场之旅注定不顺利</a></li>
<li><em class=”em_arrow”>&nbsp;</em><a href=”###”>詹姆斯空中接力上篮,热火以18-12领先</a></li>
</ul>
<a href=”###” class=”btn_href”>进入博客>></a> </div>
</div>
</div>
<script type=”text/javascript”>
$(function(){
var len=0;
var f=0;
var cq=0;
$(‘.nav_top li’).tap(function(){
var t=$(this).index();
var wh=$(‘.line’).width();
f=-25*t+”%”;
cq=100*t+”%”;
$(this).parents(‘.box_163css’).find(‘.nav_mid’).css({‘-webkit-transform’:’translate(‘+f+’)’,’-webkit-transition’:’500ms linear’} );
$(this).parents(‘.box_163css’).find(‘.line’).css({‘-webkit-transform’:’translate(‘+cq+’)’,’-webkit-transition’:’300ms linear’} );
$(this).siblings().removeClass(‘on’);
$(this).addClass(‘on’);
})
$(‘.box01’).swipeLeft(function(){
var i=$(this).index()+1;
len=-25*i+”%”;
cq=100*i+”%”;
if(i==4){return false}
else{
$(this).parent(‘.nav_mid’).css({‘-webkit-transform’:’translate(‘+len+’)’,’-webkit-transition’:’500ms linear’} );
$(this).parents(‘.box_163css’).find(‘.line’).css({‘-webkit-transform’:’translate(‘+cq+’)’,’-webkit-transition’:’500ms linear’} );
$(this).parents(‘.box_163css’).find(‘.nav_top li’).eq(i).siblings().removeClass(‘on’);
$(this).parents(‘.box_163css’).find(‘.nav_top li’).eq(i).addClass(‘on’);
}
})
$(‘.box01’).swipeRight(function(){
var i=$(this).index();
if(i==0){return false}
else{
var n=i-1;
len=-25*n+”%”;
cq=100*n+”%”;
$(this).parents(‘.box_163css’).find(‘.nav_mid’).css({‘-webkit-transform’:’translate(‘+len+’)’,’-webkit-transition’:’500ms linear’} );
$(this).parents(‘.box_163css’).find(‘.line’).css({‘-webkit-transform’:’translate(‘+cq+’)’,’-webkit-transition’:’500ms linear’} );
$(this).parents(‘.box_163css’).find(‘.nav_top li’).eq(i-1).siblings().removeClass(‘on’);
$(this).parents(‘.box_163css’).find(‘.nav_top li’).eq(i-1).addClass(‘on’);
}
})
})
</script>
</BODY>
</HTML>

You may also like...

发表评论