多圖片展開收縮實(shí)例

caikeal 發(fā)布于2019-08-01 15:45 / 1952人閱讀

摘要：運(yùn)用運(yùn)動(dòng)框架進(jìn)行多圖片展開收縮的實(shí)例展示在展示時(shí)未插入圖片用來代替多圖片的展開收縮元素居中放大除了要改變元素的寬高以外，還要改變元素定位因?yàn)樵陧撁娌季謺r(shí)點(diǎn)是根據(jù)元素的左上角即來計(jì)算的如果圖片放大一倍則位移為放大寬高的一半通過程序?qū)⒏?dòng)的

運(yùn)用運(yùn)動(dòng)框架進(jìn)行多圖片展開收縮的實(shí)例展示

在展示時(shí)未插入圖片用ul li 來代替




    
    多圖片的展開收縮

引入的運(yùn)動(dòng)框架代碼

function startMove(obj, json, fn) {
    clearInterval(obj.iTimer);
    var iCur = 0;
    var iSpeed = 0;
        
    obj.iTimer = setInterval(function() {
        
        var iBtn = true;
                    
        for ( var attr in json ) {
                            
            var iTarget = json[attr];
            
            if (attr == "opacity") {
                iCur = Math.round(css( obj, "opacity" ) * 100);
            } else {
                iCur = parseInt(css(obj, attr));
            }
            
            iSpeed = ( iTarget - iCur ) / 8;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            
            if (iCur != iTarget) {
                iBtn = false;
                if (attr == "opacity") {
                    obj.style.opacity = (iCur + iSpeed) / 100;
                    obj.style.filter = "alpha(opacity="+ (iCur + iSpeed) +")";
                } else {
                    obj.style[attr] = iCur + iSpeed + "px";
                }
            }
            
        }
        
        if (iBtn) {
            clearInterval(obj.iTimer);
            fn && fn.call(obj);
        }
        
    }, 30);
}

function css(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}