課程
/前端開發
/JavaScript
/JS動畫效果
[email protected]
2016-03-22
源自:JS動畫效果 6-2
正在回答
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)+")";?????? ??? ??? ??? obj.style.opacity=(icur+speed)/100;? ??????? ??? ??? ???? }?????? ??? ??? ?else{?????? ??? ??? ?obj.style[attr]=icur+speed+"px";?????? ??? ?? }??????? if(flag){??????????? clearInterval(obj.timer);??????????? if(fn){??????????????? fn();??????????? }??????? }????? }??????? }????? },30)??? }??????? //獲取行內元素??? function getStyle(obj,attr){??????? //針對IE瀏覽器??????? if(obj.currentStyle){??????????? return obj.currentStyle[attr];??????? }??????? //針對Firefox瀏覽器??????? else{??????????? return getComputedStyle(obj,false)[attr];??????? }??? }
舉報
通過本課程JS動畫的學習,從簡單動畫開始,逐步深入各種動畫框架封裝
2 回答老師的完美運動框架有bug
9 回答關于完美運動框架小bug的修復,附源碼
8 回答完美運動框架,不能實現鏈式運動哇!
2 回答完美框架代碼沒有效果,誰能看看哪里錯了
1 回答(不是問題)這是老師的運動框架源碼:
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-03-22
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)+")";
?????? ??? ??? ??? obj.style.opacity=(icur+speed)/100;? ?
?????? ??? ??? ???? }
?????? ??? ??? ?else{
?????? ??? ??? ?obj.style[attr]=icur+speed+"px";
?????? ??? ?? }
??????? if(flag){
??????????? clearInterval(obj.timer);
??????????? if(fn){
??????????????? fn();
??????????? }
??????? }
????? }
??????? }
????? },30)
??? }
??????? //獲取行內元素
??? function getStyle(obj,attr){
??????? //針對IE瀏覽器
??????? if(obj.currentStyle){
??????????? return obj.currentStyle[attr];
??????? }
??????? //針對Firefox瀏覽器
??????? else{
??????????? return getComputedStyle(obj,false)[attr];
??????? }
??? }