您的位置：首页 > Web前端 > JQuery

jquery 触屏滑动+定时滚动

2015-07-07 11:44 609 查看 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="applicable-device" content="mobile" />
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="telephone=no" name="format-detection"/>
<title>无标题文档</title>
</head>
<style>
*{ font-size:14px; padding:0; margin:0;}
.tab{ margin:10px;}
.tit{ height:30px; width:100%; border:1px solid #ccc; line-height:30px;}
.tit span{ display:inline-block; height:30px; line-height:30px; width:24%; border-right:1px solid #ccc; text-align:center}
.tit .cur{ color:#fff; background-color:#ccc;}
ul{overflow:hidden;zoom:1; width:300px; float:left}
ul li{ height:30px; line-height:30px; white-space:nowrap; overflow:hidden}
.tab-wrap{ position:relative; height:150px; overflow:hidden;zoom:1;}.tab-main{ position:absolute; left:0px; top:0px;}
</style>
<body>

<div class="tab" id="tap">
<div class="tit"><span class="cur">新闻</span><span>体育</span><span>娱乐</span><span>文化</span></div>
<div class="tab-wrap">
<div class="tab-main">
<ul class="current">
<li>新闻新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻新闻</li>
</ul>
<ul>
<li>体育体育体育体育体育体育体育体育体育</li>
<li>体育体育体育体育体育体育体育体育体育体育体育体育</li>
<li>体育体育体育体育体育体育体育体育体育体育</li>
<li>体育体育体育体育体育体育体育体育体育体育</li>
<li>体育体育体育体育体育体育体育体育体育体育体育</li>
</ul>
<ul>
<li>娱乐娱乐娱乐娱乐娱乐娱乐娱乐</li>
<li>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</li>
<li>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</li>
<li>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</li>
<li>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</li>
</ul>
<ul>
<li>文化文化文化文化文化文化文化文化文化文化文化</li>
<li>文化文化文化文化文化文化文化文化文化文化</li>
<li>文化文化文化文化文化文化文化文化文化文化</li>
<li>文化文化文化文化文化文化文化文化文化文化文化文化</li>
<li>文化文化文化文化文化文化文化文化文化文化</li>
</ul>
</div>
</div>
</div>

<script src="js/jquery.js"></script>
<script>

$('ul').width($(window).width()-20);
var oulWidth=$('ul').width();
var oulLength=$('ul').length;
var timer=null;
var i=0;
var j=0;
$('.tab-main').width(oulWidth*oulLength);

$(".tab-main").on("touchstart", function(e) {
e.preventDefault();
clearInterval(timer)
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$(".tab-main").on("touchmove", function(e) {
e.preventDefault();
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
});

$(".tab-main").on("touchend", function(e) {
e.preventDefault();//阻止默认触屏滑动
if ( Math.abs(X) > Math.abs(Y) && X > 0 ) { //向左
if(i==0){
i=oulLength-1;
$('.tab-main ul').eq(i).css({'position':'relative','left':-oulWidth*oulLength+'px'});
}else{
i--
};
j--;
$('.tab-main').animate({'left':-j*oulWidth});
$('.tit span').eq(j).addClass('cur').siblings().removeClass('cur');
$('.tab-main').stop().animate({'left':-j*oulWidth+'px'},function(){
if(i==oulLength-1){
$('.tab-main ul').eq(oulLength-1).css({'position':'static'});
$('.tab-main').css('left',-oulWidth*(oulLength-1));
j=oulLength-1;
};
});
}else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {//向右
rightAuto()
}else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {//向下
alert("top 2 bottom");
}else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {//向上
alert("bottom 2 top");
}else{//点击
alert("just touch");
};
timer=setInterval(rightAuto,5000);
});
//右滚动函数
function rightAuto(){
if(i==oulLength-1){
i=0;
$('.tab-main ul').eq(0).css({'position':'relative','left':oulWidth*oulLength+'px'});
}else{
i++
};
j++
$('.tab-main').animate({'left':-j*oulWidth});
$('.tit span').eq(i).addClass('cur').siblings().removeClass('cur');
$('.tab-main').stop().animate({'left':-j*oulWidth+'px'},function(){
if(i==0){
$('.tab-main ul').eq(0).css({'position':'static'});
$('.tab-main').css('left',0);
j=0;
};
})
};
//定时轮播
timer=setInterval(rightAuto,5000);

</script>
</body>
</html>


　


步骤解释：

　1.主要运用touchstart,touchmove,touchend三个事件；当touched结束时根据滑动的距离执行判断

Math.abs(X) > Math.abs(Y) 是向左右，向右，上，下，当然写在次出还有些bug，因为滑动屏幕的时候不会很直，会斜上或者斜下，因此加上“&& X < 0 ”判断更准确一些；

2.有了判断结果，然后根据相应的结果写出滑动的效果，此处我觉得和pc写法差别不大；

3. 然后就是定时滚动，此处和pc也不是很大区别，最后一点就是当进行touchstart的时候，clearInterval(timer)清除定时器，当touchend的时候，再进行滚动

ok,在此基本完成
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航