Move the finger left and right slide toggle content Demo

Say at the beginning

Recently moved to do a finger swipe left and right to toggle the effect of the content demo;

In order to show my selflessness, I decided to share it with you. (Detailed code is attached)

Body

first on the HTML code

<! doctype html>
The entire page UL part is need to switch parts of the specific content has JS stitching into

The CSS code is as follows: (this is pasted directly after less compilation)
body,div,ul{margin: 0px;padding: 0px;}. M-shape{box-sizing: border-box;}. M-shape .cont{  overflow: hidden;box-sizing: border-box;}. j-cont{  margin: 0 auto;  width: 100%;}. m-shape .cont ul {  width: 1000%;  position: relative;   margin: 0 7%;    overflow: hidden;}. m-shape .cont ul li {  display: inline-block;  float: left;   width: 8%;  padding: 0 0.3%;  overflow: hidden;   box-sizing: content-box;}. m-shape .cont ul li .tishi {  position: absolute;   Border-radius: 50%;  background: url (.. /images/assist_icon.png)  no-repeat;  background-size: 30px 30px;  width:  30px;  height: 30px;  right: 10px;  top: 10px;}. M-shape .cont ul li .title {  height: 40px;  line-height:  40px;  text-align: center;}. m-shape .cont ul li .cont {  height: 77%;  text-align:  Center;}. m-shape .cont ul li .cont .img {  height: 100%;   Text-align: center;}. m-shape .cont ul li .cont .img img {  height: 100%;   min-height: 100%;  max-height: 100%;}. m-shape .cont ul li .cont p {  text-align: center;   line-height: 40px;}. m-shape .cont ul li .msg {  position: absolute;  top:  100%;  left: 10%;  background: rgba (0, 0, 0, 0.5);   color:  #fff;   linE-height: 30px;  padding: 10px;  width: 80%;  border-radius:  4px;}. m-shape .cont ul li .j-conts_item {  background:  #9DE0FF;   Border-radius: 6px;  position: relative;}. m-shape .but_cont {  text-align: center;  padding: 20px 0;}. m-shape .but_cont .but {  background:  #e9494b;  display:  inline-block;  height: 30px;  line-height: 30px;  width: 30%;   border-radius: 15px;  color:  #fff;}. Title{  text-align: center;    height: 40px;  line-height:  40px;}
The above code has a place to explain:
The size of the j-cont to ensure that the size of self-adapting to the phone screen consistent (through the JS implementation, see the following JS)
Then the width of the UL is set to 1000%, that is, the screen is 10 times times wider;
The key CSS for Li is as follows:
width:8%;  Padding:0 0.3%;  Overflow:hidden; Box-sizing:content-box;
so its padding+width = 86% of the J-cont, that is, the screen width of 86%;
I am also the word meaning movement when I perform scrolling 86%; but there is a problem as follows:
650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/75/E2/wKiom1ZELrzQvC_QAACc5ethWaQ772.png "style=" float: none; "title=" Image 1.png "alt=" Wkiom1zelrzqvc_qaacc5ethwaq772.png "/>650) this.width=650;" src= "http:// S4.51cto.com/wyfs02/m02/75/e0/wkiol1zelwiil9dlaacmus30vy4759.png "title=" Image 3.png "style=" Float:none; "alt=" Wkiol1zelwiil9dlaacmus30vy4759.png "/>
There is no picture on the left side of the first picture, but this position must be reserved, or the first position will be shifted in the back:
650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/75/E2/wKiom1ZEL3jC4BlVAACnnvCUa-8914.png "title=" Image 4.png "alt=" Wkiom1zel3jc4blvaacnnvcua-8914.png "/>

So the UL set marin:0% 7%, ensure the first position is correct, the rear each switch position is also correct.

To ensure that the size of the smart device is free to scale, write a method to initialize the size of the container:
    //Initialize Container     var html_cont_initialization = function   ()  {         //Initialize container          $ (". J-cont"). CSS ({             " Height ":  $ (Window). Height ()  + " px ",              "Min-height":  $ (Window). Height ()  +  "px"          });         //Initialize content container          $ (". J-conts_item"). CSS ({             "height") :  $ (window). Height ()  - 110 +  "px",              "Min-height":  $ (Window). Height ()  - 110 +  "px",              "Max-height":  $ (Window). Height ()  - 110 +  "px"          });      }
Where 110px is the head title, and the row of the button is the sum of $ (". Title"), $ (". But_cont") height.

There is also a piece of code that is used to load the content template (this place, now false data)
    var sex_initialization = function  ()  {         var html =  "";    for  (var i =  0; i < 5; i++)  {        html +=   ' <li class= ' f-cb j-conts >             <div class= "J-conts_item" ><i class= "Tishi" ></i>             <div class= "title" > What is your body size? ' + i +  ' </div>             <div class= "Cont" >                 <div class= "img" ></div>                 <p>a type </p>             </div>         </div></li> ';     }    $ (".m-shape  UL "). Append (HTML);     html_cont_initialization ();         }
    
   
 
Touch screen left and right toggle body effect     function switchshape ()  {         var startX, startY, endX, endY;         var ismove = false;//Touch: Whether there is move        between start,end operations  var isswitching = false;//whether the animation is being performed         var  curindex = 0;        var maxli = $ (". M-shape ul li "). length - 1;        $ (" Body "). On (" Touchmove ", ". M-shape ul ",  touchmovehandler);         $ ( "Body"). On ("Touchstart",  ". M-shape ul",  touchstarthandler);         $ ("Body"). On ("Touchend",  ". M-shape ul",  touchendhandler);         //touch screen left and right cutBody Change effect         function touchstarthandler (event)  {             var touch = event.touches[0];             startY = touch.pageY;             startX = touch.pageX;         }        function touchmovehandler ( Event)  {            var touch =  event.touches[0];            endx =  touch.pageX;            isMove =  True;        }        function  touchendhandler(event)  {            if  (!ismove | |  isswitching)  {                 return;            }             var w = 86;             var curleft = curindex ? -curindex *  w : 0;            var dirx  = 1;//Slide Direction             if  (math.abs (STARTX&NBSP;-&NBSP;ENDX)  > 50)  {//sliding spacing greater than 50                 if  (startx - endx > 0)  {                     if  ( CURINDEX&NBSP;===&NBSP;MAXLI)  {//is currently the last                          return;                     }                      curIndex++;                 } else {                     if  (0 === curindex)  {//is now the first                           return;                     }                      dirX = -1;                     curIndex--;                 }             }            moveto ($ (this),  "left",  curleft, -curindex * w, 43, dirx);             isMove = false;        }         //animation function         //params: Object, CSS properties, starting, ending, 50ms moving distance, direction 1←,-1 Right         function moveto ($obj,  objprop, start,  end, spacing, direction)  {             var temp = start;             isswitching = true;            var  movetimer = setinterval (function  ()  {                 if  (1 === direction &&  temp - end <= 0)  | |   ( -1 === direction && temp - end >= 0)  {                      clearinterval (Movetimer);                     isswitching = false;                     return;                 }                 temp = temp  - spacing * direction;                  $obj. css (objprop, temp +  "%");      &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;},&NBSP;200);        }     }    switchshape ();
The above code has 3 points to note:

 
 

  
  
 
   
Each slide should include three action touch Start,move,end integral, because touch screen will also trigger start,end;
Added Ismove status, false after each move is true;end, guaranteed three actions to trigger before performing the swipe.
 
   
Specific sliding distance, generally speaking 30-50 can be directly;
 
   
If you are currently performing an animation, you should ignore it when you swipe it, that is, when the slide animation finishes executing, the next time.
 
 Say in the end
 
  
 
 
I move to play less, so consider inevitably ill-conceived, a lot of advice!
Move the finger left and right slide toggle content Demo