jquery旋转风车效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery旋转风车效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery旋转风车效果</title>
<style>
body {padding:0; margin:0;}
.title {background-color:rgba(0,0,0,0.56); text-align:center; width:100%; position:fixed; top:0; left:0; padding:5px 0; z-index:99999;}
.title a {color:#FFF; text-decoration:none; font-size:16px; font-weight:bolder; line-height:24px;}
.bg {background:url("images/bg.jpg") repeat scroll 0 0 #603F46;}
.content {background:url("images/left.jpg") right 0 no-repeat; background-size:auto 100% !important; width:900px; position:absolute; right:50%; margin-right:50px;; height:800px;}
#fengche {height:330px; width:214px; background:url("images/fengche.png") -32px top no-repeat; right:-68px; top:170px; position:absolute; }
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body class="bg">
<div class="content">
  <div style="background-position: -4621px top;" id="fengche"></div>
</div>
<script src="js/script.js"></script>
</body>
</html>

JS代码(script.js):

(function(){
	var lastTime = 0;
	var vendors = ['ms','moz','webkit','o'];
	for(var x = 0;
	x < vendors.length && !window.requestAnimationFrame;
	++x){
	window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
	window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback,element){
	var currTime = new Date().getTime();
	var timeToCall = Math.max(0,16 - (currTime - lastTime));
	var id = window.setTimeout(function(){
	callback(currTime + timeToCall);
}
,timeToCall);
	lastTime = currTime + timeToCall;
	return id;
}
;
	if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id){
	clearTimeout(id);
}
;
}
());
	// 自定义动画动作var pinWheelArr36 = [-32,-302,-572,-841,-1112,-1381,-1651,-1921,-2191,-2461,-2732,-3002,-3272,-3542,-3812,-4082,-4352,-4621,-4891,-5161,-5431,-5702,-5972,-6242,-6512,-6782,-7053,-7322,-7592,-7861,-8132,-8402,-8672,-8941,-9211,-9482];
	var pinWheel = $('#fengche')var pinCount = 0;
	var fps = 31;
	function spin(){
	setTimeout(function(){
	requestAnimationFrame(spin)if(pinCount > pinWheelArr36.length - 1){
	pinCount = 0;
}
;
	pinWheel.css('background-position',pinWheelArr36[pinCount] + 'px top')pinCount++;
}
,1000/fps);
}
;
	spin();

附件:下载该文件资源,减少时间成本(增值服务)