I'm wondering if anybody knows of a code snippet anywhere that allows you to do zoomed pans on hover -- for an example, see:
http://opinionator.blogs.nytimes.com/2010/12/09/visualizing-slavery/
开发者_Python百科There's an image of Abraham Lincoln reading the Emancipation Proclamation, built in Flash, that does exactly what I'm asking.
Note that I'm not asking for ultimately a "magnifying glass" tool like Anything Zoomer (http://css-tricks.com/examples/AnythingZoomer/); I want the zoomed component to replace the unzoomed image and maintain the same dimensions.
I'd prefer this as a jQuery plugin but am open to anything.
here's a starting point:
$.fn.zoom = function() {
var w = this.width();
var h = this.height();
var zimg = $('<img>', {
'src': this.attr('src')
}).css({
'position': 'absolute',
'left': 0,
'top': 0,
'opacity': 0
})
var moveZone = $('<div>').css({
'position': 'absolute',
'left': 0,
'top': 0,
'width': '100%',
'height': '100%'
}).hover(
function() {
zimg.fadeTo(500, 1);
}, function() {
zimg.fadeTo(500, 0);
}).mousemove(
function(ev) {
zimg.css({
'left': (w - zimg.width()) / w * ev.offsetX,
'top': (h - zimg.height()) / h * ev.offsetY
});
});
this.wrap($('<div>').css({
'overflow': 'hidden',
'position': 'relative',
'width': w,
'height': h
})).after(zimg, moveZone)
}
demo
Just found this, slightly closer to what I'm wanting: MiniZoomPan -- see: http://plugins.jquery.com/project/miniZoomPan
Thanks anyway though, Andy!
精彩评论