                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS動畫效果

為什么div的大小不能還原成200/200，請幫忙看下，TKS~!

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title>運動框架檢驗03</title>
?? ??? ?<style type="text/css">
?? ??? ??? ?*{margin: 0;padding: 0;list-style: none;}
?? ??? ??? ?div{
?? ??? ??? ??? ?width: 200px;
?? ??? ??? ??? ?height: 200px;
?? ??? ??? ??? ?border: 30px solid red;
?? ??? ??? ??? ?background: blue;
?? ??? ??? ??? ?margin: 50px auto;
?? ??? ??? ??? ?opacity: 1;
?? ??? ??? ?}
?? ??? ?</style>
?? ??? ?
?? ??? ?<script type="text/javascript" src="js/starMove.js"></script>
?? ??? ?<script type="text/javascript">
?? ??? ??? ?window.onload=function(){
?? ??? ??? ??? ?var odiv=document.getElementById("div");
?? ??? ??? ??? ?odiv.onmouseover=function(){
?? ??? ??? ??? ??? ?starMove(odiv,{width:400,height:400,opacity:0},function(){
?? ??? ??? ??? ??? ??? ?odiv.style.background="green";
?? ??? ??? ??? ??? ??? ?starMove(odiv,{width:200,height:200,opacity:100});
?? ??? ??? ??? ??? ?});
?? ??? ??? ??? ?};
?? ??? ??? ?};
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ?<div id="div"></div>
?? ?</body>
</html>

qq_小潘安_03830329

2016-11-09

源自：JS動畫效果 6-2

關注問題我要回答

653

操作

收起

4 回答

天之殤
2016-11-13

function?startMove(obj,json,fn){
????clearInterval(obj.timer);
????obj.timer?=?setInterval(function(){
????????var?flag?=?true;
????????for(var?attr?in?json){
????????????var?typeValue?=?null;
????????????if(attr=="opacity")
????????????????typeValue?=?Math.round(parseFloat(getStyle(obj,attr))*100);
????????????else
????????????????typeValue?=?parseInt(getStyle(obj,attr));
????????????var?speed?=?(json[attr]-typeValue)/8;
????????????speed?=?speed>0??Math.ceil(speed):Math.floor(speed);
????????????if(typeValue!=json[attr]){
????????????????console.info(flag)
????????????????flag?=?false;
????????????}
????????????if(attr=="opacity"){
????????????????obj.style.filter?=?'alpha(opacity:'+typeValue+speed+')';
????????????????obj.style[attr]?=?(typeValue+speed)/100;
????????????}
????????????else
????????????????obj.style[attr]?=?typeValue+speed+"px";
????????}
????????if(flag){
????????????console.info("flag:"+flag);
????????????clearInterval(obj.timer);
????????????if(fn){
????????????????fn();
????????????}
????????}
????},30);
}

這是我的移動函數，是可以實現你的效果