Loupe

MooTools

by mtambulut

HTML

<div id="ipadback">
    <div id="loupe" style="background-position: -288px -207px;"></div>
</div>

CSS

#ipadback {
    position: relative;
    top: 40px;
    left: 40px;
    width: 227px;
    height: 286px;
    background-image: url(http://campl.us/tweet/ipadback.png);
    border: solid 1px red;
}


#loupe {
    /*cursor: none;*/
    position: absolute;
    width: 150px;
    height: 150px;
    
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border: 4px solid white;
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
    
    background-color: white;
    background-image: url(http://campl.us/tweet/ipadback-zoomed.jpg);
    background-repeat: no-repeat;
}

JavaScript

var loupe = document.getElementById('loupe');
var zoomedW = 1110;
var zoomedH = 1484;
// MooTools 1.3.2 kullanılmalı !!

document.getElementById('ipadback').addEvents({
    mousemove: function(event) {
        var pos = this.getPosition();
        var x = Math.min(Math.max(0, event.page.x - pos.x), this.offsetWidth);
        var y = Math.min(Math.max(0, event.page.y - pos.y), this.offsetHeight);
        var left = x - (loupe.offsetWidth / 2);
        var top = y - (loupe.offsetHeight / 2);
        var bgX = -(x / this.offsetWidth) * zoomedW;
        var bgY = -(y / this.offsetHeight) * zoomedH;
        
        loupe.setStyles({
            'top': top,
            'left': left,
            'background-position': [bgX, bgY]
        });
    }
});