移动端tab点击切换和滑动切换

最新推荐文章于 2024-08-10 17:13:35 发布

impossible1994727

最新推荐文章于 2024-08-10 17:13:35 发布

阅读量1.2w

点赞数

分类专栏： css+js 文章标签： tab滑动切换 animate

本文链接：https://blog.csdn.net/impossible1994727/article/details/72677335

版权

css+js 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<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.οnlοad=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)