移动端tab点解切换和滑动切换
来源:互联网 发布:淘宝店铺转让的风险 编辑:程序博客网 时间:2024/06/05 17:21
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/mobiletab.css"/>
</head>
<body>
<div class="slider">
<div class="slider_title" id="slider_title">
<div class="slider_item">
<a href="javascript:;" class="active slider_a">今天</a>
</div>
<div class="slider_item">
<a href="javascript:;" class="slider_a">明天</a>
</div>
<div class="slider_item">
<a href="javascript:;" class="slider_a">大前天</a>
</div>
<div class="slider_item">
<a href="javascript:;" class="slider_a">大大前天</a>
</div>
</div>
<div class="slider_content">
<div class="slider_widthcontent">
<div class="slider_itemcontent" id="slider_item1">
1
</div>
<div class="slider_itemcontent" id="slider_item2">
2
</div>
<div class="slider_itemcontent" id="slider_item3">
3
</div>
<div class="slider_itemcontent" id="slider_item4">
4
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mobiletab.js" type="text/javascript" charset="utf-8"></script>
</html>
window.onload=function(){
document.documentElement.style.fontSize=document.documentElement.clientWidth/3.75+'px';
}
var windowwidth = $(window).width();
$(function(){
$('.slider_itemcontent').css('width',windowwidth);
//点击
var oldflag=0;var _index;
$('.slider_item').bind('click',function(e){
$(this).children('a').addClass('active');
$(this).siblings().children('a').removeClass('active');
var leftlength = $(this).index()-oldflag;
if(leftlength>0){
$('.slider_widthcontent').animate({
left:-windowwidth*leftlength
},1000)
}
else if(leftlength==0){
$('.slider_widthcontent').animate({
left:0
},1000)
}
})
})
var startx,starty,currentactive;
var slider_a = document.getElementsByClassName('slider_a');
function getAngle(angx, angy) {
return Math.atan2(angy, angx) * 180 / Math.PI;
};
function getDirection(startx,starty,endx,endy){
var angx =endx-startx;
var angy =endy-starty;
var result = 0;
if(Math.abs(angx)<2&&Math.abs(angy)<2){
return result;
}
var angle = getAngle(angx,angy);
if(angle>-135&&angle<=-45){
result=1;
}else if(angle>45&&angle<135){
result = 2;
}else if((angle>=135&&angle<=180)||(angle>=-180&&angle<-135)){
result= 3 ;
}else if(angle>=-45&&angle<=45){
result = 4;
}
return result;
}
document.addEventListener('touchstart',function(e){
startx = e.touches[0].pageX;
starty=e.touches[0].pageY;
},false);
document.addEventListener('touchend',function(e){
var endx,endy;
endx=e.changedTouches[0].pageX;
endy=e.changedTouches[0].pageY;
var direction=getDirection(startx,starty,endx,endy);
switch(direction){
case 0:
// alert('none');
break;
case 1:
// alert('up');
break;
case 2:
// alert('down');
break;
case 3:
var currentactive;
for(var i=0;i<$('.slider_a').length;i++){
if($('.slider_a:eq('+i+')').hasClass('active')){
currentactive=i;
$('.slider_a:eq('+i+')').removeClass('active');
if(i<3){
i++;
currentactive=i;
}
$('.slider_a:eq('+i+')').addClass('active');
}
}
$('.slider_widthcontent').animate({
left:-windowwidth*currentactive
},1000)
// alert('left');
break;
case 4:
// alert('right');
var currentactive;
for(var i=0;i<$('.slider_a').length;i++){
if($('.slider_a:eq('+i+')').hasClass('active')){
currentactive=i;
$('.slider_a:eq('+i+')').removeClass('active');
if(i>0){
i--;
currentactive=i;
}
$('.slider_a:eq('+i+')').addClass('active');
}
}
$('.slider_widthcontent').animate({
left:-windowwidth*currentactive
},1000)
break;
default:
}
},false)
- 移动端tab点解切换和滑动切换
- 移动端点击时间和触摸滑动事件实现tab切换
- Tab切换和自动切换
- jquery_mobile移动端幻灯片效果,滑动切换,点击切换
- 移动端手指滑动切换图片框架
- tab头部滑动切换,TabLayout和ViewPager实现
- Android之新闻客服端顶部导航栏Tab点击和左右滑动实现切换界面
- 使用ViewPager和Fragment同时实现点击底部Tab切换和手势滑动切换Fragment
- Fragment实现Tab页切换,滑动和点击都可切换。
- android tab之间滑动切换界面功能
- android tab之间滑动切换界面功能
- 微信小程序实现滑动tab切换和点击tab切换并显示相应的数据(附源代码)
- 移动端网页纯原生js选项卡tab切换
- Android TabLayout、ViewPager实现顶部和底部Tab导航 点击滑动切换Tab页面
- fleep滑动切换tab(切换带动画)
- fleep滑动切换tab(切换带动画)
- vue刷新和tab切换
- Tab+ViewPager+Activity可滑动tab切换activity
- Spring+EhCache缓存实例
- 解决VS2013单元测试调用Oracle时出现32位兼容问题
- phpcms v9调用指定栏目名称、url、图片、描述、子栏目、文章
- 半是转载半是自己代码与总结
- hash map 的工作原理。转
- 移动端tab点解切换和滑动切换
- Jenkins + Jmeter 构建接口、性能测试 (Windows平台)
- 离散题目11 判断双射
- 强制WebRTC使用转发(relay)模式
- [POJ3292]Semi-prime H-numbers
- Java观察者模式与事件驱动模式实例比较
- H.264编码系统几个比较重要的算法
- 关于Java中的paint,repaint,update三个方法的关系
- layer 使用记录