请看一下我的代码，鼠标只有滑过文字再撤回才能实现效果，滑过别的区域就不行？xiexie
<<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>0914-4小图标旋转</title>
<style type="text/css">
#move{
margin: 10px auto;
padding: 0;
border:1px solid #ccc;
}
#move a{
display: inline-block;
width: 58px;
height: 30px;
border:1px solid #ddd;
border-radius: 3px;
background-color: #fff;
text-align: center;
margin: 10px 17px;
position: relative;
padding-top: 40px;
color: #000;
font-size: 12px;
text-decoration: none;
line-height: 25px;
overflow: hidden;
}
#move a i{
position: absolute;
top: 20px;
left: 0;
display: inline-block;
width: 100%;
text-align: center;
filter: alpha(opacity:100);
opacity: 1;
}
#move a:hover{
color: #f00;
}
#move img{
border:none;
}
</style>
<script src="js/0914-4.js"></script>
<script>
window.onload=function(){
var oMove=document.getElementById("move");
var aList=oMove.getElementsByTagName("a");
for(var i=0;i<aList.length;i++){
aList[i].onmouseover=function(){
var _this=this.getElementsByTagName("i")[0];
startMove(_this,{top:-25,opacity:0},function(){
_this.style.top=30+"px";
startMove(_this,{top:20,opacity:100});
});
}
}
}
</script>
</head>
<body>
<div id="move">
<a href="#"><i><img src="images/caipiao.jpg"></i><p>彩票</p></a>
<a href="#"><i><img src="images/dianying.jpg"></i><p>电影</p></a>
<a href="#"><i><img src="images/yinyue.jpg"></i><p>音乐</p></a>
<a href="#"><i><img src="images/jiaofei.jpg"></i><p>缴费</p></a>
<a href="#"><i><img src="images/licai.jpg"></i><p>理财</p></a>
<a href="#"><i><img src="images/waimai.jpg"></i><p>外卖</p></a>
</div>
</body>
</html>
function getStyle(obj,attr){
//IE
if(obj.currentStyle){
return obj.currentStyle[attr];
}
//火狐 chrome
else{
return getComputedStyle(obj,false)[attr];
}
}
//var json={attr1:target1,attr2:target2}
//startMove(obj,{attr1:iTarget1,attr2:iTarget2},fn)
function startMove(obj,json,fn){
var flag=true;//默认都到达目标
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var attr in json){
//1.取当前值
var icur=0;
//如果属性为透明度，四舍五入(透明度值转换为小数*100)
if (attr=="opacity") {
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
icur=parseInt(getStyle(obj,attr));
}
//2.算速度
var speed=(json[attr]-icur)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//3.检测停止
if (icur!=json[attr]){
flag=false;//当前值没有达到目标值，标签为假
}
if (attr=="opacity") {
obj.style.filter="alpha(opacity:"+icur+speed+")";//IE
obj.style.opacity=(icur+speed)/100;//火狐 chrome
}
else{
obj.style[attr]=icur+speed+"px";
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30)
}
