H5 適配 動畫animation js touch

圖片預加載jquery插件 jquery.imgpreload

var 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');

// 資源圖片加載
jQuery.imgpreload(load_img, {
all: function () {
//加載完成

}

});

 

加載動畫  示例

http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html

 

 

animation css3 動畫

@-webkit-keyframes jiantouan{from{}to{}}

css 樣式

-webkit-animation-name: jiantouan;   名稱
-webkit-animation-iteration-count: infinite; 播放次數
-webkit-animation-timing-function: linear; 播放方法
-webkit-animation-delay: 0s; 延時多久播放
-webkit-animation-direction: normal; 
-webkit-animation-duration: 1s; 動畫持續時間

-webkit-animation-fill-mode: forwards;   動畫播放完成後保持最後的狀態

 

H5總體適配思路

依照設計圖的寬高比 根據手機屏幕的高度 計算出場景真正佔取的寬度，場景元素的佈局以實際計算的寬度爲基礎；

背景圖拉伸全屏顯示

如：移動設計圖的比例通常爲750 *  1334   寬高比爲0.56

var 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 });//設置實際場景的寬度
}

背景圖要跟場景融合；

背景圖跟場景元素分離；

//js touch  簡單向上滑動監控

var startX, startY;
function touchStart(event) {

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

}
else {
event.preventDefault(); 阻止瀏覽器的默認事件
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 (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
if (startX) {
x = touch.pageX - startX;
y = touch.pageY - startY;
//alert(y);
if (y < -30) {

//作你的事情 startX = 0; startY = 0; } } } }, false);