Mobile Terminal list sliding
<Style type = "text/css">
*{
Margin: 0;
Padding: 0;
}
# Scroll div {
Border: 1px solid red;
Float: left;
Background: # abcdef;
Text-align: center;
}
</Style>
</Head>
<Body>
<Div id = "container" style = "position: relative; width: 100%; height: 90%; overflow: hidden;">
<Div id = "scroll" style = "position: absolute; height: 100%;">
<Div> 5 </div>
<Div> 1 </div>
<Div> 2 </div>
<Div> 3 </div>
<Div> 4 </div>
<Div> 5 </div>
<Div> 1 </div>
</Div>
</Div>
</Body>
Copy code
3. Touch screen mobile Algorithm
The Code is as follows:
Copy code
Var scroll = document. getElementById ('scroll ');
Var container = document. getElementById ("container ")
Var clientAtt =
{
Width: document.doc umentElement. clientWidth,
Height: document.doc umentElement. clientHeight
};
// Set the size
Container. style. width = clientAtt. width + 'px ';
Container. style. height = clientAtt. height + 'px ';
Scroll. style. width = clientAtt. width * 7 + 'px ';
Scroll. style. left =-clientAtt. width + 'px ';
$ ("# Scroll div" ).css ({width: clientAtt. width-2 + 'px ', height: clientAtt. height-2 + 'px ', 'Line-height': clientAtt. height-2 + 'px '});
Var initLeft = 0; // initial distance of the object
Var disStart = 0; // touch screen distance
Scroll. addEventListener ("touchstart", function (ev ){
Var oEvent = ev | event;
OEvent. preventDefault ();
Var touch = oEvent. touches [0]; // obtains the touch screen information of the finger.
DisStart = touch. clientX; // touch point X of the finger
InitLeft = this. offsetLeft; // start point left of the object
}, False)
Scroll. addEventListener ("touchmove", function (ev ){
Var oEvent = ev | event;
OEvent. preventDefault ();
If (oEvent.tar getTouches. length = 1 ){
Var touch = oEvent. touches [0]; // obtains the touch screen information of the finger.
Var disEnd = touch. clientX; // touch screen X
// Moving distance of the current object = touch point position of the finger-start position of the touch screen + start position of the object
Var moveDis = disEnd-disStart + initLeft;
// Sliding boundary Processing
If (Math. abs (moveDis)> clientAtt. width * 6 ){
MoveDis =-clientAtt. width * 6;
}
If (moveDis> 0 ){
MoveDis = 0;
}
This. style. left = moveDis + 'px ';
}
}, False );
Copy code
4. Special Handling of finger exit from the screen
Copy code
Var currIndex = 1; // The first
Scroll. addEventListener ('touchend', function (ev ){
Var absLeft = Math. abs (this. offsetLeft );
If (absLeft! = Math. abs (initLeft )){
If (absLeft> Math. abs (initLeft )){
CurrIndex ++;
}
Else {
CurrIndex --;
}
}
CurrIndex = currIndex> 6? 6: currIndex;
$ (This). stop (true). animate ({"left":-currIndex * clientAtt. width + 'px '}, 300, function (){
// Loop: processing at the beginning and end
/*
If 5th elements continue to slide to the left, how can they connect to 1st elements when 1st elements slide to 2nd elements ????
To solve this problem, when the finger is released, immediately change the current object's position to the distance when sliding to 1st elements.
1st elements continue to slide to the right.
*/
If (currIndex = 6 ){
Optional (this).css ("left",-clientAtt. width + 'pxy ');
CurrIndex = 1;
}
Else if (currIndex = 0 ){
Optional (this).css ("left",-5 * clientAtt. width + 'px ');
CurrIndex = 5;
}
});
});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
