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

时间: 05-04

H5 适配 动画animation js touch的相关文章

css3 动画(animation)-简单入门

css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做一些动画).具体如何使用呢??? 首先定义一个动画,然后引用动画. 定义一个动画要使用@keyframes,然后跟上你要定义的动画的名字.关键字"from"表示开始, "to"表示结束,等同于0% 和 100%.最好使用百分比来表示变化发生的时间,这样的话还可以定义从开

《The CG Tutorial》阅读笔记——动画 Animation

这段时间阅读了英文版的NVidia官方的<The CG Tutorial>,通过它来学习基本的图形学知识和着色器编程. 在此做一个阅读记录. 动画 Animation 一.基于时间的运动 Movement in Time 实现动画渲染,需要应用程序对时间进行监测,并将它作为一个全局变量传递给着色器. 尽量在GPU上使用顶点着色器执行动画计算是一种高效的动画实现方式,它能够释放CPU,让CPU处理更多的复杂计算,比如碰撞检测,人工智能与游戏玩法. 二.一个做脉冲运动的对象 A Pulsating

《.NET最佳实践》与Ext JS/Touch的团队开发

概述 有不少开发人员都问过我,Ext JS/Touch是否支持团队开发?对于这个问题,我可以毫不犹豫的回答:支持.原因是在Sencha官网博客中客户示例中,有不少项目都是基于团队模式开发的. 那为什么会出现这个问题?我觉得问题的关键在于不知道如何去进行模块独立调试或做最终的整合.对于这个问题,我觉得<.NET最佳实践>这本书(下 文中简称为实践一书)或许会给大家带来一点启示.虽然这本书是针对.NET而写的,但我觉得,这对于Ext JS/Touch,甚至于其他开发语言的开发,还是有不错的借鉴意义

zepto.js touch库

最近在做一个手机版的项目,而做手机网页,那么就会考虑到用轻量级库,用jquery的话,会比较庞大,而我们就选用 zepto.js 来做开发,可是在开发的时候要用到手势事件(比如左右滑动,上下滑动),于是就在网上查了一下 zepto.js 的官网,发现有 touch 事件来模拟手势事件,这个开发就会带来便利,而不用去写JS底层代码:在网上搜罗了一下 zepto.js touch 库,找到了不多 touch.js 的相关信息,真的感觉很少(不知道是不是zepto.js不成熟的表现),终于在网上搜罗到

动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成)

× 目录 [1]漂浮的白云 [2]旋转的星球 [3]正方体合成 前面的话 前面介绍过动画animation的详细用法,本文主要介绍动画animation的三个效果 漂浮的白云 [效果演示] [简要介绍] 漂浮的白云主要通过远景白云和近景白云来实现立体漂浮效果.远景和近景分别使用两张背景图片,通过改变其背景定位来实现白云移动效果,通过设置不同的动画持续时间来实现交错漂浮的效果 [主要代码] .box{ position: relative; height: 300px; width: 500px;

css3中的变形(transform)、过渡(transtion)、动画(animation)

Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一起来看看CSS3中transform的旋转rotate.扭曲skew.缩放scale和移动translate具体如何实现,老样子,我们就从transform的语法开始吧.是构成transtion和animation的基础. 语法: transform : none | <transform-func

CSS动画 animation与transition

一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画).transition(过渡).transform(变形).translate(移动). CSS3中的transform(变形)属性用于内联元素和块级元素,可以旋转.扭曲.缩放.移动元素,它的属性值有以下五个:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix: transform(变形)是CSS3中的元素的属性,而translate只是transform的一个属性

记录CSS3动画animation学习小心得

上个星期在学习JS之余,温习CSS3,在网上看到一个3D立体球的效果,于是自己也按照上面的方法写了一个: 效果(请用chrome浏览): http://htmlpreview.github.io/?https://github.com/yuhaod1/Blog/blob/master/Blog/css3%E7%AB%8B%E4%BD%93%E7%90%83/css3%E7%AB%8B%E4%BD%93%E7%90%83.html 只做了chrome下的效果,不做其它浏览器的兼容: 当时写完代码测

今日提及之动画animation

今天没有说什么内容,只是对HTML5的细节补充,如HTML结构的可以省略到最大的地步 <!DOCTYPE html><meta charset="UTF-8"> <title>animation</title> 这里是放内容的 没有了基本的结构标签了,浏览器会自动帮我们生成. 还有标签的属性的双引号也可以省略: <input type=text> HTML5让我体验到它在最大化的简化标签,使代码量最小化. 还有调试工具的使用,