很奇怪，第一次移进去icon向上运动后不会继续实现链式运动，也就是后面的fn没运行
chendidi
2017-01-05 13:27
找不到出现这个问题的原因，求大神指教
html文件：
<!DOVTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test5-淘宝案例</title>
<style>
body {
margin: 0;
padding: 0;
}
#box{
width: 306px;
height: 204px;
background: #ccc;
margin: 30px auto;
border: 1px solid #9c9c9c;
}
#box a{
position: relative;
float: left;
width: 80px;
height: 80px;
line-height: 90px;
background-color: #fff;
margin: 10px;
text-align: center;
font-size: 12px;
text-decoration: none;
color: #ccc;
border: 1px solid #ccc;
border-radius: 3px;
font-weight: 600;
overflow: hidden;
}
#box a i{
display: block;
position: absolute;
top: 20px;
left: 30px;
filter: alpha(opcity:100);
opacity: 1;
}
#box a:hover{
color: #f00;
}
</style>
<script src="move.js"></script>
<script>
window.onload = function(){
var box = document.getElementById('box'),
alist = box.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 = '30px';
startMove(_this,{top:20,opacity:100});
});
}
}
}
</script>
</head>
<body>
<div id="box">
<a href="#"><i><img src="images/food.png"></i><p>美食</p></a>
<a href="#"><i><img src="images/game.png"></i><p>游戏</p></a>
<a href="#"><i><img src="images/insurance.png"></i><p>保险</p></a>
<a href="#"><i><img src="images/lottery.png"></i><p>彩票</p></a>
<a href="#"><i><img src="images/movie.png"></i><p>电影</p></a>
<a href="#"><i><img src="images/travel.png"></i><p>旅游</p></a>
</div>
</body>
</html>
script文件，move.js
//获取样式
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
//随意属性值
//startMove(obj,{attr1:iTarget1,attr2:iTarget2},fn)
function startMove(obj,json,fn){
var flat = true; //true：都到达了
clearInterval(obj.timer);
obj.timer = setInterval(function(){
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]){ //所有的运动还没完成
flat = false;
}
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity:'+(icur + speed)+')';
obj.style.opacity = (icur + speed)/100;
}else{
obj.style[attr] = icur + speed +'px';
}
if(flat == true){
clearInterval(obj.timer);
if(fn){
fn();
}
}
}
},30);
}
1回答
-
- emily973
- 2017-01-06 14:40:56
function startMove(obj,json,fn){ // var flat = true; //原来 clearInterval(obj.timer); obj.timer = setInterval(function(){ var flat = true; //现在 for(var attr in json){ …… }把 var flat = true，放到定时器里面就可以了
JS动画效果
113908 学习 · 1502 问题
相似问题