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, 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);