Touch screen development skills--left and right sliding navigation

Today, a little trick, I believe there are many programmers will consider the touch screen development, after all, now the touch screen devices so much.

First of all, you need a bit of JS knowledge, do not need to be very cow, because I am also a JS rookie. This code also seems to be modified from somewhere else, just in line with the need.

Words not much to say, the last instance.

The navigation in the above page can be left and right sliding.

The layout of the words is believed to be not difficult for CSS people.

<!--Navigation Section -    <DivID= "Warp"class= "Warp">        <DivID= "inner"class= "inner">            <ahref= "#">Home</a>            <ahref= "#">Mv</a>            <ahref= "#">Yue Single</a>            <ahref= "#">V List</a>            <ahref= "#">Program</a>            <ahref= "#">Music Stage</a>            <ahref= "#">App Download</a>            <ahref= "#">Rice balls</a>            <ahref= "#">Mall</a>                 <ahref= "#">Information</a>            <ahref= "#">My home.</a>        </Div>    </Div>    <!--Navigation Section -

In fact, it is very simple, an outer container, a sub-container, a sub-container in the navigation, CSS believe that the layout will know what the situation.

. Warp{width:100%;Max-width:480px;margin:0 Auto;Height:50px;background:#EEE;Overflow:Hidden;Border-bottom:1px solid #CCC;Clear:both;}. Inner{Line-height:50px;width:630px;Height:50px;position:relative;Overflow:Hidden;}. Inner a{Display:Block;padding:0 10px;float: Left;font-size:18px;}

It is noted that the positioning position:relative of inner is relative positioning.

With the above basis, it is necessary to write the JS section, first of all, how to call this function.

// Horizontal Sliding navigation var New Horizontalmove ({              "#inner",              "#warp",              0.5          });        

is not very simple, where innerid, is the container of the di,warpid is the parent container id,speed parameters can be debugged, note that speed is 0 to 1.

Now we're on the source.

/*================================ Call Method Horizontalmove ({innerid:innerid,//sliding element ID such as "#inner" warpid:warpid,/ /sliding element peripheral container ID such as "#warp" speed:speed//Sliding parameter 0-1 0 The smaller the sliding amplitude, the greater the 1 sliding amplitude}); ================================*/        functionhorizontalmove (options) {//Initializing Data              varSpeed = 0.5; varStartX;//x-coordinate when touching             varx = 0;//x-axis sliding distance              varabovex=0;//set a global variable to record the position of the last internal block slideOptions= Options | |{} Speed=Options.speed; if(options.innerid&&options.warpid) {           vardocumentwidth=$ (Options.innerid). width ();//height of internal sliding module           varwapperwidth=$ (options.warpid). width ();//height of external frame           varInner=$ (Options.innerid); varWarp = $ (options.warpid) [0]              functionTouchstart (e) {//Touch StartE.preventdefault (); varTouch=e.touches[0]; StartX= Touch.pagex;//the coordinates of the first touch             }              functionTouchMove (e) {//SlideE.preventdefault (); varTouch = E.touches[0]; X= Touch.pagex-startx;//Distance to SlideInner.css ({left:abovex+x*Speed }); }                functionTouchend (e) {//finger off the screenAbovex=parseint (Inner.css ("left"));//The position in the global variable that records the slide of the inner slider after touch is complete must be converted to integer by parseint ();                   if(x>0&&abovex>0) {//when you swipe to the top, you can't swipe online .                       //inner.style.top=0;Inner.animate ({left:0},200); Abovex=0; }                                       if(x<0&& (abovex< (-(documentwidth-wapperwidth))) {//when sliding to the bottom of the screen can not slide                     //inner.style.top=-(documentheight-wapperheight) + "px";Inner.animate ({left:-(documentwidth-wapperwidth)},200); Abovex=-(documentwidth-wapperwidth); }              }//Warp.addeventlistener (' Touchstart ', Touchstart,false); Warp.addeventlistener (' Touchmove ', Touchmove,false); Warp.addeventlistener (' Touchend ', Touchend,false); }                     }          

Code comments believe it is clear that the touch event is actually the application. If you are JS Daniel, very much hope to learn with you.

Touch screen development skills--left and right sliding navigation