您的位置:首页 - HTML5
jQuery+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);
//计算fps
fps = geFps(time);

//绘制背景
drawBack();

//绘制即时参数
content.fillText(fps.toFixed() + " fps", 20, 20);

}else{

lastFpsUpdateTime=time;

}
//继续下一帧动画
requestAnimFrame(animate);
}



var lastFpsUpdateTime = 0;
//计算fps
function 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>
本站导航
相关文章
柯乐义 Copyright© keleyi.com