javascript - Mootools 的图像缩放

Question

我想在我的页面中包含像http://www.magictoolbox.com/magiczoom/这样的图像缩放器，但我没有找到任何类似的 mootools 库。这是我的页面图像：

我试过这个：

http://mootools.net/forge/p/zoomer

但它会放大内部图像（不在它附近）并破坏我所有的图像设计（图像由宽度和高度决定）

here is my fiddle: http://jsfiddle.net/94PLv/

Answer 1

• 选项1：
• 在图像 div 内缩放

在这里演示

你需要类似的东西：

document.getElements('.inner a').addEvent('click', function (e) {
    e.stop();
    dragit = this.getElement('img').makeDraggable();
    this.getElement('img').removeClass('max_limit');
});

我修好了你的小提琴，这是你要找的吗？我删除了您的一些内联 CSS 并添加了 Mootools More，这样您就可以使用拖动而不是滚动条。

还添加了

document.getElements('.fotoDiv .inner img').addClass('max_limit');
document.getElements('.fotoDiv .inner img').setProperty('style','');

在下一次拇指点击时“放回原处”。

• 选项 2：
• 使用Louper插件

在这里演示

添加的代码：

//NEW ADDED
document.getElements('.inner a').addEvent('click', function(event) {
    event.stop();
});
var loupe = {
    src: 'http://img.artlebedev.ru/studio/us/2009/loup.png',
    x: 101,
    y: 102,
    radius: 85
};
document.getElements('a.click').addEvent('click', function(event) {
    var id = this.getProperty('rel');
    var target_el = document.id('im_' + id).getElement('img');
    new Louper(target_el, {
        big: target_el.src,
        radius: 80,
        loupe: loupe,
        onReady: function() {
            this.loupeWrapper.setStyles({
                left: this.smallSize.width - this.loupeSize.width + 60,
                top: this.smallSize.height - this.loupeSize.height + 120
            });
        }
    });
});