htm5视差动画
点击这里查看效果
requestAnimationFrame.js 文件代码：
window.requestAnimFrame = (function() {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame || function( /* function */ callback, /* DOMElement */ element) {window.setTimeout(callback, 1000 / 60);};})();?
页面主要代码：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>视差动画</title><script type="text/javascript" src="js/jquery8.js"></script><script type="text/javascript" src="js/requestAnimationFrame.js"></script><style type="text/css">body {background:#dddddd;}#control {width:1000px;margin:0 auto;}#containter {text-align:center;}#canavas {margin:10px;padding:10px;background:#ffffff;border:thin #aaaaaa;}</style><script type="text/javascript">$(function() {canvas = jQuery("#canavas")[0];content = canvas.getContext("2d");//天空背景sky = new Image();sky.src = "image/back.jpg";//云朵c1 = new Image();c1.src = "image/cloud2.png";c2 = new Image();c2.src = "image/cloud1.jpg";c3 = new Image();c3.src = "image/cloud3.jpg";lastTime = (+new Date())requestAnimFrame(animate);pause=false;$("#b1").click(function(){pause=!pause;});});//获取随机数据function getRandom(min, max) {return parseInt(Math.random() * (max - min) + min);}SKY_VELOCITY = 50;skyOffset = 0;C1_VELOCITY = 100;c1Offset = 0;C2_VELOCITY = 150;c2Offset = 0;C3_VELOCITY = 200;c3Offset = 0;fangxiag = 1;function drawBack() {//背景移位skyOffset = skyOffset < sky.width ? skyOffset + SKY_VELOCITY / fps : 0;//远/中/近 三处的云朵移位c1Offset = c1Offset < canvas.width ? c1Offset + C1_VELOCITY / fps : 0;c2Offset = c2Offset < canvas.width ? c2Offset + C2_VELOCITY / fps : 0;c3Offset = c3Offset < canvas.width ? c3Offset + C3_VELOCITY / fps : 0;//绘制三朵云content.save();content.translate(-skyOffset, 0);content.drawImage(sky, 0, 0);content.drawImage(sky, sky.width, 0);content.restore();content.save();content.translate(-c1Offset, 0);content.drawImage(c1, 50, 50);content.drawImage(c1, 600, 70);content.drawImage(c1, 1050, 50);content.drawImage(c1, 1600, 70);content.restore();content.save();content.translate(-c2Offset, 0);content.drawImage(c2, 130, 120);content.drawImage(c2, 730, 170);content.drawImage(c2, 1130, 120);content.drawImage(c2, 1730, 170);content.restore();content.save();content.translate(-c3Offset, 0);content.drawImage(c3, 600, 250);content.drawImage(c3, 100, 320);content.drawImage(c3, 1600, 250);content.drawImage(c3, 110, 320);content.restore();}fps = 0;//实现动画function animate(time) {if(!pause){//清楚背景content.clearRect(0, 0, canvas.width, canvas.height);//计算fpsfps = geFps(time);//绘制背景drawBack();//绘制即时参数content.fillText(fps.toFixed() + " fps", 20, 20);}else{lastFpsUpdateTime=time; }//继续下一帧动画requestAnimFrame(animate);}var lastFpsUpdateTime = 0;//计算fpsfunction geFps(time) {fps = 1000 / (time - lastFpsUpdateTime);lastFpsUpdateTime = time;return fps;}</script></head><body><div id="control"><input id="b1" type="button" value="暂停" /></div><div id="containter"><canvas id="canavas" width="500" height="200"></canvas></div></body></html>?转载自：http://keleyi.com/a/bjac/syjet5g0.htm
http://ini.iteye.com
?