<!DOCTYPE html>
<html lang="en">
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta content="email=no" name="format-detection"/>
<script type="text/javascript">
(function(){
var resizeEvent = 'orientationchange' in window ? 'orientationchange' :'resize';
var rescale = function(){
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640 * 40 +'px';
}
window.addEventListener(resizeEvent,rescale,false);
document.addEventListener('DOMContentLoaded',rescale,false);
})();
</script>
<title>Document</title>
<!-- <link rel="stylesheet" href="reset.css"> -->
<!-- <link rel="stylesheet" href="css/index.css"> -->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
canvas{
width: 16rem;
height: 28.5rem;
}
.inner {
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container">
<div class="page" id="page1" style="display: block">
<div class="inner">
<canvas id="canvas1"></canvas>
</div>
</div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
var timer = null;
var index = 1;
// var video = $('.video').get(0);
//获取标签，然后渲染上下文环境
var canvas = $('#canvas1').get(0);
var c = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
//绘图
var drawImage = function(index){
var img = new Image();
img.onload = function(){
c.drawImage(img,0,0,w,h);
}
img.src='imgs/video/che_'+index+'.jpg';
}
drawImage(1);
canvas.addEventListener('touchstart',function(ev){
ev.preventDefault();
if(timer){
clearInterval(timer);
timer = null;
}
timer = setInterval(function(){
index++;
if(index < 236){
drawImage(index);
}else{
clearInterval(timer);
timer = null;
}
},64)
},false)
canvas.addEventListener('touchend',function(ev){
ev.preventDefault();
clearInterval(timer);
timer = null;
},false)
})
</script>
</html>
