星空网 > 软件开发 > 网页设计

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



原标题:H5 适配 动画animation js touch

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

广大大:https://www.goluckyvip.com/tag/905.html
发往马来西亚的物流:https://www.goluckyvip.com/tag/90500.html
义乌到马来西亚货运:https://www.goluckyvip.com/tag/90501.html
海运上海到马来西亚:https://www.goluckyvip.com/tag/90502.html
去马来西亚的物流:https://www.goluckyvip.com/tag/90503.html
货物运输马来西亚:https://www.goluckyvip.com/tag/90504.html
跨境支付百科——巴西支付篇:https://www.kjdsnews.com/a/1836648.html
大福地快捷酒店预订 大福酒店怎么走:https://www.vstour.cn/a/365187.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流