学了JS动画效果7-1的JS动画案例，自己动手 做了个，但是不会动，想不懂。。。以下为JS外部链接代码，其他文件可用没问题。//startMove(obj,{attr1:target,attr2:target},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;
if(attr == 'opacity'){
icur =Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur =parseInt(getStyle(obj,attr));
}
//2.算速度
var speed=(json[attr]-icur)/8;
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)+')';
obj.style.opacity =(icur +speed)/100;
}
else{
obj.style[attr] = icur +speed +'px';
//obj.style.width=icur +speed+'px';
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
}
},30);
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}以下为html部分代码，但是实现不了动画效果<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS动画实例-失败</title>
<style>
#move{width: 2560px;margin: 0 auto;}
img{float: left;margin-top:220px;}
</style>
<script type="text/javascript" src="js/move.js" ></script>
<script>
window.onload=function(){
var oMove = document.getElementById('move');
var aList= oMove.getElementsByTagName('a');
aList[0].onmouseover=function(){
var _this =aList[0].getElementsByTagName('i')[0];
startMove(_this,{top:-250,opacity:0});
}
}
</script>
</head>
<body>
<div id="move">
<a href="#"><i><img src="img/Ziggs_512px.png"/></i><p></p></a>
</div>
</body>
</html>求问为什么啊~~好纠结
1 回答
pardon110
TA贡献1038条经验 获得超227个赞
问题出在你对CSS的top属性不了解，与js无关。所以添加样式 i{position:absolute;}就可以了。
CSS top属性定义和用法
top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
注释：如果 "position" 属性的值为 "static"，那么设置 "top" 属性不会产生任何效果。
添加回答
举报
0/150
提交
取消