图片预加载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);