課程
/前端開發(fā)
/JavaScript
/JS動畫效果
誰有這兩節(jié)的完整代碼么？跪求 么么
2018-01-31
源自：JS動畫效果 7-1
正在回答
//以下是老師封裝的函數(shù)，其余的css代碼自己寫就好了
function startMove(obj,json,fn) {
/*
obj為要改變的元素對象
json為屬性/值對，即要改變的屬性和值。用于同步運(yùn)動
fn為回調(diào)函數(shù)，用于設(shè)置鏈?zhǔn)竭\(yùn)動
*/
// 首先清除定時(shí)器
clearInterval(obj.timer);
obj.timer=setInterval(function(){
flag=true;
//對于同時(shí)改變元素多個屬性值的情況
for(var attr in json)
{
//獲取屬性值
var icur=0;? ?//初始化屬性值為0
if(attr=="opacity")
//獲取的透明度為小數(shù)（0-1），首先轉(zhuǎn)化為百分制（0-100），然后四舍五入取整
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur=parseInt(getStyle(obj,attr));
}
// 判斷所有屬性值是否都達(dá)到目標(biāo)值，一個未達(dá)到，即為false
if(icur!=json[attr])
flag=false;
//設(shè)置屬性改變的速度
var speed=0;
speed=(json[attr]-icur)/4;? ?//4為參數(shù)，可為任意值，越小改變速度越快
speed=speed>0?Math.ceil(speed):Math.floor(speed);? //取整
//改變屬性值
obj.style.filter="alpha(opacity:"+(icur+speed)+")";
obj.style.opacity=(icur+speed)/100;
obj.style[attr]=icur+speed+"px";
//待改變的屬性值同時(shí)完成一次改變后，判斷是否都達(dá)到目標(biāo)值
if(flag)
// 如果存在回調(diào)函數(shù)，則調(diào)用之
if(fn)
fn();
},30)?
// 獲取css樣式
function getStyle(obj,attr) {
if(obj.currentStyle)
return obj.currentStyle[attr];? ?//IE8
return getComputedStyle(obj,false)[attr];? //IE 9 10 11支持? 別人測試
qq_神眷羽晶田_0 提問者
舉報(bào)
通過本課程JS動畫的學(xué)習(xí)，從簡單動畫開始，逐步深入各種動畫框架封裝
1 回答跪求源代碼
1 回答完整代碼
1 回答誰有這節(jié)課講的完美運(yùn)動框架的源代碼啊？發(fā)我一份好不好？
1 回答求這節(jié)課的源碼
2 回答完美框架代碼沒有效果，誰能看看哪里錯了
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2018-02-28
//以下是老師封裝的函數(shù)，其余的css代碼自己寫就好了
function startMove(obj,json,fn) {
/*
obj為要改變的元素對象
json為屬性/值對，即要改變的屬性和值。用于同步運(yùn)動
fn為回調(diào)函數(shù)，用于設(shè)置鏈?zhǔn)竭\(yùn)動
*/
// 首先清除定時(shí)器
clearInterval(obj.timer);
obj.timer=setInterval(function(){
flag=true;
//對于同時(shí)改變元素多個屬性值的情況
for(var attr in json)
{
//獲取屬性值
var icur=0;? ?//初始化屬性值為0
if(attr=="opacity")
{
//獲取的透明度為小數(shù)（0-1），首先轉(zhuǎn)化為百分制（0-100），然后四舍五入取整
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur=parseInt(getStyle(obj,attr));
}
// 判斷所有屬性值是否都達(dá)到目標(biāo)值，一個未達(dá)到，即為false
if(icur!=json[attr])
{
flag=false;
}
//設(shè)置屬性改變的速度
var speed=0;
speed=(json[attr]-icur)/4;? ?//4為參數(shù)，可為任意值，越小改變速度越快
speed=speed>0?Math.ceil(speed):Math.floor(speed);? //取整
//改變屬性值
if(attr=="opacity")
{
obj.style.filter="alpha(opacity:"+(icur+speed)+")";
obj.style.opacity=(icur+speed)/100;
}else{
obj.style[attr]=icur+speed+"px";
}
}
//待改變的屬性值同時(shí)完成一次改變后，判斷是否都達(dá)到目標(biāo)值
if(flag)
{
clearInterval(obj.timer);
// 如果存在回調(diào)函數(shù)，則調(diào)用之
if(fn)
{
fn();
}
}
},30)?
}
// 獲取css樣式
function getStyle(obj,attr) {
if(obj.currentStyle)
{
return obj.currentStyle[attr];? ?//IE8
}else{
return getComputedStyle(obj,false)[attr];? //IE 9 10 11支持? 別人測試
}
}