求助 这一节动画最后透明度变成0.88了，没有变回1，求大神帮助看看
来源：7-1 JS动画案例
吃瓜小夏
2016-05-13 15:55
<!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>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
span{left:32px;top:20px;position:absolute;opacity:1;filter:alpha(opacity:100);}
img{width:40px;height:40px;}
a{float:left;display:block;height:100px;width:100px;border:1px solid #CCC;font-family:"微软雅黑";font-size:14px;color:#999;text-align:center;margin:10px;position:relative;text-decoration:none;}
a:hover{color:#060;}
p{top:60px;left:36px;position:absolute;}
</style>
<script src="newmove.js"></script>
<script>
window.onload=function(){
var ai=document.getElementsByTagName("a");
for(var i=0;i<ai.length;i++){
ai[i].onmouseover=function(){
var This=this;
var span=This.getElementsByTagName('span')[0];
startMove(span,{top:-25,opacity:0},function(){span.style.top=40+"px";startMove(span,{top:20,opacity:100})}
);
}
}
}
</script>
</head>
<body>
<a href=""><span><img src="1_1.png" /></span><p>网络</p></a>
<a href=""><span><img src="1_2.jpg" /></span><p>娱乐</p></a>
<a href=""><span><img src="1_3.jpg" /></span><p>酒店</p></a>
</body>
</html>运动框架代码如下
function getStyle(obj,attr){
if(obj.currentStyle){
//IE
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj,false)[attr];
}
}
//json = {attr1:iTarget1,attr2:iTarget2}
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;
}
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity:'+(icur+speed)+')'; //IE
obj.style.opacity = (icur+speed)/100;
} else {
obj.style[attr] = icur + speed +'px';
}
if(flag) {
clearInterval(obj.timer);
flag = true;
if(fn){
fn();
}
}
}
},20);
}// JavaScript Document
写回答
关注
3回答
-
- 高手之路
- 2016-05-16 15:25:55
后来检查了框架 , 我把 if(flag) 写在了 for in 里边，这个是需要写在fon in括号外的
-
- 高手之路
- 2016-05-16 15:11:38
同样出现了透明度不到1的问题
-
- Dream0703
- 2016-05-15 21:38:09
你的运动框架有问题，用我写的运动框架就可以实现opacity=1；你把下面
if(flag)
flag=ture;//这行删了试试
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113909 学习 · 1502 问题
相似问题