您好 请问我的代码可以执行，但是move函数里边的函数参数不执行是怎么回事。
qq_楚地再无歌_0
2018-06-13 16:06
<!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>
*{
margin:0;
padding:0;
}
#main{
width:300px;
height:300px;
position:relative;
margin:0 auto;
background:#09C;
border-radius:10px;
}
#main #circle{
width:200px;
height:200px;
background:#F3C;
border-radius:50%;
position:absolute;
left:50px;
top:50px;
}
#main a{
width:100px;
height:50px;
background:#0FC;
border-radius:10px;
display:block;
color:white;
text-decoration:none;
text-align:center;
line-height:50px;
position:absolute;
left:100px;
bottom:0;
}
</style>
<script>
window.onload=function(){
var link=document.getElementById("link");
var cir=document.getElementById("circle");
var flag=true;
link.onmouseover=function(){
move(cir,{top:-50,opacity:0},function(){
move(cir,{top:50,opacity:100})
})
}
}
function move(obj,json,fn) {
clearInterval(obj.timer);
obj.timer=setInterval(function () {
for(var attr in json){
var cur=0;
if(attr=='opacity'){
cur=parseFloat(getstyle(obj,attr))*100;
}
else{
cur=parseInt(getstyle(obj,attr));
}
var speed=(json[attr]-cur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur!==json[attr]){
flag=false;
}
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100
}
else{
obj.style[attr]=cur+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];
}
}
</script>
</head>
<body>
<div id="main">
<div id="circle"></div>
<a href="#" id="link">来回</a>
</div>
</body>
</html>
1回答
-
- 茶和散客
- 2018-07-06 18:30:57
window.onload=function(){ var link=document.getElementById("link"); var cir=document.getElementById("circle"); link.onmouseover=function(){ move(cir,{width:100,opacity:0},function(){ move(cir,{top:50,opacity:100}); }); }; }; function move(obj,json,fn) { clearInterval(obj.timer); obj.timer=setInterval(function () { for(var attr in json){ var flag=true; var cur=0; if(attr=='opacity'){ cur=Math.round(parseFloat(getstyle(obj,attr))*100); }else{ cur=parseInt(getstyle(obj,attr)); } var speed=(json[attr]-cur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur!==json[attr]){ flag=false; } if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(cur+speed)+')'; obj.style.opacity=(cur+speed)/100; }else{ obj.style[attr]=cur+speed+"px"; } } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } },30); }
JS动画效果
113925 学习 · 1443 问题
相似问题