您好 請問我的代碼可以執(zhí)行，但是move函數(shù)里邊的函數(shù)參數(shù)不執(zhí)行是怎么回事。
<!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>
2018-07-06
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); }