<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>九宫格动画</title>
<style type="text/css">
*{margin: 0;padding: 0;}
html,body{width: 100%;height: 100%;font-family: "微软雅黑";}
li{list-style: none;}
/*动画*/
.con{width: 100%;height: 100%;background-color: gainsboro;overflow: hidden;position: relative;}
#rot{width: 300px;height: 300px;margin: 30px auto;border: 1px solid red;position: relative;}
#rot li,.rot9{width: 98px;height: 98px;border: 1px solid red;text-align: center;line-height: 98px;position: absolute;z-index: 2;transition: all 0.1s linear;}
input{width:100%;height:100%;outline: none;background-color: rosybrown;}
.rot1{top: 0;left: 0px;}
.rot2{top: 0;left: 100px;}
.rot3{top: 0;left: 200px;}
.rot4{top: 100px;left: 200px;}
.rot5{top: 200px;left: 200px;}
.rot6{top: 200px;left: 100px;}
.rot7{top: 200px;left: 0px;}
.rot8{top: 100px;left: 0px;}
.rot9{top: 131px;left: 138px;}
.rot{background-color: burlywood;}
</style>
</head>
<body>
<div class="con">
<ul id="rot">
<li class="rot1 rot">1</li>
<li class="rot2">2</li>
<li class="rot3">3</li>
<li class="rot4">4</li>
<li class="rot5">5</li>
<li class="rot6">6</li>
<li class="rot7">7</li>
<li class="rot8">8</li>
</ul>
<div class="rot9"><input type="button" id="button" value="点击转动" /> </div>
</div>
</body>
<script src="http://mat1.gtimg.com/tech/css/huiyan/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#button').click(function(){
var n =0;
function xz(){
var abj=$('ul li').eq(n).attr('class');
var list=$('ul li').eq(n);
list.addClass('rot').siblings().removeClass('rot');
}
//快速转动
var time = setInterval(function(){
n++;
xz();
if(n==7){n=-1}
},100)
setTimeout(function(){
clearInterval(time)
console.log(n)
},7*100)
//减速转动
setTimeout(function(){
$(' #rot li').css('transition','all 0.3s linear')
var time = setInterval(function(){
n++;
xz();
if(n==7){n=-1}
},300)
setTimeout(function(){
clearInterval(time)
},3*300);
//计算差值
setTimeout(function(){
$(' #rot li').css('transition','all 0.5s linear')
n=3;
xz()
},4*300);
},7*100)
})
})
</script>
</html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>九宫格动画</title>
<style type="text/css">
*{margin: 0;padding: 0;}
html,body{width: 100%;height: 100%;font-family: "微软雅黑";}
li{list-style: none;}
/*动画*/
.con{width: 100%;height: 100%;background-color: gainsboro;overflow: hidden;position: relative;}
#rot{width: 300px;height: 300px;margin: 30px auto;border: 1px solid red;position: relative;}
#rot li,.rot9{width: 98px;height: 98px;border: 1px solid red;text-align: center;line-height: 98px;position: absolute;z-index: 2;transition: all 0.1s linear;}
input{width:100%;height:100%;outline: none;background-color: rosybrown;}
.rot1{top: 0;left: 0px;}
.rot2{top: 0;left: 100px;}
.rot3{top: 0;left: 200px;}
.rot4{top: 100px;left: 200px;}
.rot5{top: 200px;left: 200px;}
.rot6{top: 200px;left: 100px;}
.rot7{top: 200px;left: 0px;}
.rot8{top: 100px;left: 0px;}
.rot9{top: 131px;left: 138px;}
.rot{background-color: burlywood;}
</style>
</head>
<body>
<div class="con">
<ul id="rot">
<li class="rot1 rot">1</li>
<li class="rot2">2</li>
<li class="rot3">3</li>
<li class="rot4">4</li>
<li class="rot5">5</li>
<li class="rot6">6</li>
<li class="rot7">7</li>
<li class="rot8">8</li>
</ul>
<div class="rot9"><input type="button" id="button" value="点击转动" /> </div>
</div>
</body>
<script src="http://mat1.gtimg.com/tech/css/huiyan/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#button').click(function(){
var n =0;
function xz(){
var abj=$('ul li').eq(n).attr('class');
var list=$('ul li').eq(n);
list.addClass('rot').siblings().removeClass('rot');
}
//快速转动
var time = setInterval(function(){
n++;
xz();
if(n==7){n=-1}
},100)
setTimeout(function(){
clearInterval(time)
console.log(n)
},7*100)
//减速转动
setTimeout(function(){
$(' #rot li').css('transition','all 0.3s linear')
var time = setInterval(function(){
n++;
xz();
if(n==7){n=-1}
},300)
setTimeout(function(){
clearInterval(time)
},3*300);
//计算差值
setTimeout(function(){
$(' #rot li').css('transition','all 0.5s linear')
n=3;
xz()
},4*300);
},7*100)
})
})
</script>
</html>