欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

移动端TAB触屏切换结果

发布时间:2016-11-27  编辑:杨雨个人博客网站   点击:   

我们行使移动端时可以通过触屏手势阁下滑动劳迫椿TAB栏目,如网易消息等APP栏目切换。我们说的TAB一样平常由导航条和TAB对应的内容构成,切换导航条上的标签同时标签对应的内容也会随着切换。本文将团结实例给各人先容一个移动端TAB触屏切换结果。

HTML

我们筹备一个TAB导航#pagenavi,内里包括TAB导航要切换的四个导航按钮,然后是切换的主体内容#slider,这里应该安排四个li与导航按钮对应,内容自界说。

<div class="box-163Css">
	<ul id="pagenavi" class="page">
        <li><a href="#http://www.helloweba.com/Css.Html" class="active">CSS3</a></li>
      	<li><a href="#http://www.helloweba.net/jquery.Html">JAVASCRIPT</a></li>
        <li><a href="#http://www.helloweba.com/php.Html">PHP</a></li>
        <li><a href="#http://www.helloweba.net/web.Html">HTML5</a></li>
    </ul>
    <div id="slider" class="swipe">
      <ul class="box01_list">
        <li class="li_list">
		...
		</li>
		...<!--总共4个li-->
	  </ul>
	</div>
</div>

虽然,我们还必要给HTML加上Css样式,本例已打包好Css文件供各人下载。

JAVASCRIPT

因为是移动端应用,我们加载zepto.js,zepto就是体积小的jquery。然后必要加载触屏滑动插件touchslider.js。

<script type="text/javascript" src="js/zepto_min.js"></script>
<script type="text/javascript" src="js/touchslider.js"></script>

接下来我们就直接挪用TouchSlider,通过配置绑定tab,滑动偏向、速率、时刻等信息实现内容切换,请看具体代码:

<script type="text/javascript">
	var page='pagenavi';
	var mslide='slider';
	var mtitle='emtitle';
	arrdiv = 'arrdiv';

	var as=document.getElementById(page).getElementsByTagName('a');

	var tt=new TouchSlider({id:mslide,'auto':'-1',fx:'ease-out',direction:'left',speed:600,timeout:5000,'before':function(index){
		var as=document.getElementById(this.page).getElementsByTagName('a');
		as[this.p].className='';
		as[index].className='active';
		this.p=index;
		var txt=as[index].innerText;
		$("#"+this.page).parent().find('.emtitle').text(txt);
		var txturl=as[index].getAttribute('href');		
		var turl=txturl.split('#');
		$("#"+this.page).parent().find('.go_btn').attr('href',turl[1]);
	}});

	tt.page = page;
	tt.p = 0;
	for(var i=0;i<as.length;i++){
		(function(){
			var j=i;
			as[j].tt = tt;
			as[j].onclick=function(){
				this.tt.slide(j);
				return false;
			}
		})();
	}
</script>
本文地址:http://itbyc.com/web/html5/13530.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1