Using jquery to achieve a mobile page similar to the "NetEase News" horizontal title swipe

Html:

<div id= "NavBar" > <div id= ' navbar_content ' style= "left:0px;"                    > <div class= "Channel active" > <span>shouye</span> </div> <div class= "channel" > <span>shouyeshouye< /SPAN> </div> <div class= "channel" > &LT;SPAN&G                        t;shouyeshouyeshouyeshouyes</span> </div> <div class= "channel" > <span>shouye</span> </div> <div class= "Cha Nnel "> <span>shouye</span> </div> <di                    V class= "Channel" > <span>shouye</span> </div> <div class= "Channel" > <span>shouye</span> </div> <div class= "channel" >                        <span>shouye</span> </div> <div class= "channel" >            <span>shouye</span> </div> </div> </div> </div>

Css:

#navbar {Background:rgba (247,247,247,0.95);    Overflow:hidden;    position:relative; Text-Align:center; Font-size:1em; Padding-left:5px; Line-height:28px;} #navbar_content {font-size:1em; Text-Align:left; White-Space:nowrap; Position:relative;}. channel{Vertical-Align:top; Display:inline-Block; padding:05px; Color:rgba (0,0,0,0.6); Font-Weight:normal; Line-height:26px; Border-bottom:2px solid Transparent;}.    channel.active {color: #1c88cd; Border-color: #1c88cd;}

Js:

 $(function() {Console.log ($ (' #navbar '). Width ())varTotal_width=0; vardiv_arr=$ ('. Channel '));  for(vari=0,len=div_arr.length;i<len;i++) {Total_width+=Div_arr[i].offsetwidth;    } console.log (Total_width); varX,old_left; $(' #navbar_content '). Live (' Touchstart ',function(e) {console.log (E.originalevent.pagex) x= E.originalevent.targettouches[0].pagex//Anchor PointOld_left =parseint (E.currenttarget.style.left); }). Live (' Touchmove ',function(e) {varChange = E.originalevent.targettouches[0].pagex-x; E.currenttarget.style.left= (Old_left+change) + "px"; }). Live (' Touchend ',function(e) {varleft =parseint (E.currenttarget.style.left); varNew_left; varWindow_width=Document.body.scrollWidth; if(Left < parseint ("-" +total_width) +$ (' #navbar '). Width () +100) {New_left= "-" + (total_width-$ (' #navbar '). Width () +100); }Else if(Left > 0) {New_left= ' 0 '} $ (e.currenttarget). Animate ({left:new_left},500); E.currenttarget.style.left=New_left;    }); });

Using jquery to achieve a mobile page similar to the "NetEase News" horizontal title swipe