H5 adaption animation js touch,

H5 adaption animation js touch,
Jquery. imgpreloadvar load_img = [];
Load_img.push ('HTTP: // m.pubuzhixing.com/Images/vote/music.gif ');
Load_img.push ('HTTP: // m.pubuzhixing.com/Images/vote/music_off.png'); // resource image loading
JQuery. imgpreload (load_img ,{
All: function (){
// Loading completed}); loading animation example http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html animation css3 animation @-webkit-keyframes jiantouan {from {}to {}} css style-webkit-animation-name: jiantouan; name
-Webkit-animation-iteration-count: infinite; playback times
-Webkit-animation-timing-function: linear; Playback Method
-Webkit-animation-delay: 0 s; delay duration
-Webkit-animation-direction: normal;
-Webkit-animation-duration: 1 s; animation duration-webkit-animation-fill-mode: forwards; after the animation is played, keep the final state. The overall H5 adaptation idea is calculated based on the aspect ratio of the design drawing and the actual width of the scene based on the height of the mobile phone screen, the layout of scene elements is based on the actual calculated width. The full screen display of the background image is stretched. For example, the ratio of the moving design diagram is generally 750*1334. the aspect ratio is 0.56var pageWidth = window. innerWidth;
Var pageHeight = window. innerHeight;
Var rwidth = 0.56 * pageHeight;
If (rwidth <pageWidth ){
Var left = (pageWidth-rwidth)/2;
$ (". Screen" ).css ({left: left, width: rwidth}); // set the width of the actual scenario.
} The background image should be integrated with the scenario; the background image should be separated from the scene element; // js touch slide upwards to monitor var startX and startY;
Function touchStart (event ){

If ($ (". screen. current"). hasClass ("cover_last ")){

}
Else {
Event. preventDefault (); blocks the default events of the browser
Var touch = event. touches [0];
StartX = touch. pageX;
StartY = touch. pageY;

}
}
Var touchuid = document. getElementById ("touchuid ");
Touchuid. addEventListener ('touchstart', touchstart, false );

Touchuid. addEventListener ('touchmove ', function (event ){
// If there is only one finger in the position of this element
If (event.tar getTouches. length = 1 ){
Var touch = event.tar getTouches [0];
If (startX ){
X = touch. pageX-startX;
Y = touch. pageY-startY;
// Alert (y );
If (y <-30) {// do your thing
StartX = 0;
StartY = 0;
}
}

}
}, False );