原生JS实现拖拽照片墙

本文实例为大家分享了一个用原生JS实现的可拖拽照片墙，效果如下：

实现代码如下：

以下是上面代码中引入的move.js文件，主要用于实现运动效果，代码如下：

function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}
 
function startMove(obj, json, fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var bStop = true;
        for (var attr in json) {
 
            var iCur = 0;
 
            if (attr == 'opacity') {
                iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
            } else {
                iCur = parseInt(getStyle(obj, attr));
            }
 
 
            var iSpeed = (json[attr] - iCur) / 8;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
 
 
            if (iCur != json[attr]) {
                bStop = false;
            }
 
            if (attr == 'opacity') {
                obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')';
                obj.style.opacity = (iCur + iSpeed) / 100;
            } else {
                obj.style[attr] = iCur + iSpeed + 'px';
            }
        }
 
        if (bStop) {
 
            clearInterval(obj.timer);
 
            if (fn) {
                fn();
            }
        }
    }, 30)
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。