关于鼠标在图表上移动也会引起旋转是怎么回事？就是鼠标移入他会转一圈，移出同样会？？？？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝js案例</title>
<script type="text/javascript" src="../move.js"></script>
<script type="text/javascript">
window.onload=function(){
var oMove=document.getElementById('move');
var aList=oMove.getElementsByTagName('a');
for(var i in aList){
aList[i].onmouseover=function(){
var _this=this.getElementsByTagName('i')[0];
startMove(_this,{top:-25,opacity:0},function(){
_this.style.top=20+'px';
startMove(_this,{top:10,opacity:100})
})
}
}
}
</script>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#move {
width: 240px;
margin: 10px auto;
background-color: #f5f4f4;
border: 1px solid #ccc;
overflow: hidden;
}
#move a {
float: left;
display: inline-block;
width: 58px;
height: 25px;
border: 1px solid #ddd;
border-radius: 3px;
background: #fff;
text-align: center;
margin: 10px 10px;
position: relative;
padding-top: 40px;
color: #9c9c9c;
font-size: 12px;
text-decoration: none;
line-height: 25px;
overflow: hidden;
}
#move a i {
position: absolute;
top: 10px;
left: 0;
display: inline-block;
width: 100%;
text-align: center;
opacity: 1;
filter: alpha(opacity=100);
}
#move a:hover {
color: #f00;
}
#move img {
border: none;
}
</style>
<body>
<div id="move">
<a href="#"><i><img src="caipiao.png"></i><p>彩票</p></a>
<a href="#"><i><img src="movie.png"></i><p>电影</p></a>
<a href="#"><i><img src="music.png"></i><p>音乐</p></a>
<a href="#"><i><img src="jiaofei.png"></i><p>缴费</p></a>
<a href="#"><i><img src="licai.png"></i><p>理财</p></a>
<a href="#"><i><img src="food.png"></i><p>外卖</p></a>
</div>
</body>
</html>
function getStyle(obj,attr){
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag=true;
for(var attr in json)
{
var icur=0;
if(attr=='opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur=parseInt(getStyle(obj,attr));
}
//获取速度
var speed=(json[attr]-icur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
// 动画停止
if(icur!==json[attr]){
flag=false;
}else{
flag=true;
}
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(icur+speed)+')';
obj.style.opacity=(icur+speed)/100;
}else{
obj.style[attr]=icur+speed+'px';
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},15 )
}
