Understanding Drag map functionality

by Kishore Sahasranaman

HTML

<div class="content sync">
    <img src="http://urban-walks.com/static/img/slider/map/map-dark_3000.jpg" />
</div>
<div class="content boxed sync">
    <img src="http://urban-walks.com/static/img/slider/map/map-light_3000.jpg" />
</div>

CSS

.content {
    width: 800px;
    height: 600px;
    overflow: hidden;
}
.content img {
    opacity: 0;
    transition: opacity .6s linear .8s;
}
.content img.loaded {
    opacity: 1;
}
.img-pan-container, .img-pan-container img {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.img-pan-container {
    position: relative;
    overflow: hidden;
    cursor: crosshair;
    height: 100%;
    width: 100%;
}
.img-pan-container img {
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    position: absolute;
    top: 0;
    left: 0;
}
.boxed {
    width: 183px;
    height: 200px;
    top: 10%;
    position: absolute;
    left: 10%;
    border: 8px black solid;
}

JavaScript

$.fn.imagePanning = function () {
    var init = "center",
        speed = 800, //animation/tween speed
        sync = ".sync", //synchronized instances selector (leave empty for no sync)
        //custom js tween
        _tweenTo = function (el, prop, to, duration, easing, overwrite) {
            if (!el._mTween) {
                el._mTween = {
                    top: {},
                    left: {}
                };
            }
            var startTime = _getTime(),
                _delay, progress = 0,
                from = el.offsetTop,
                elStyle = el.style,
                _request, tobj = el._mTween[prop];
            if (prop === "left") {
                from = el.offsetLeft;
            }
            var diff = to - from;
            if (overwrite !== "none") {
                _cancelTween();
            }
            _startTween();

            function _step() {
                progress = _getTime() - startTime;
                _tween();
                if (progress >= tobj.time) {
                    tobj.time = (progress > tobj.time) ? progress + _delay - (progress - tobj.time) : progress + _delay - 1;
                    if (tobj.time < progress + 1) {
                        tobj.time = progress + 1;
                    }
                }
                if (tobj.time < duration) {
                    tobj.id = _request(_step);
                }
            }

            function _tween() {
                if (duration > 0) {
                    tobj.currVal = _ease(tobj.time, from, diff, duration, easing);
                    elStyle[prop] = Math.round(tobj.currVal) + "px";
                } else {
                    elStyle[prop] = to + "px";
                }
            }

            function _startTween() {
                _delay = 1000 / 60;
                tobj.time = progress + _delay;
                _request = (!window.requestAnimationFrame) ? function (f) {
                    _tween();
                   ...