【问题标题】:mootools image enlarge on mouse hover plugin鼠标悬停插件上的mootools图像放大
【发布时间】:2013-04-11 18:19:20
【问题描述】:

我正在寻找一个 mootools 插件,它会在鼠标悬停在当前图像上时放大图像。因此,当用户将鼠标悬停在图像上时,用户会感觉到图像被放大了。非常接近我的要求的是http://highslide.com/。这是我找到的示例http://jsfiddle.net/Jmeks/2/。我需要完全像这样使用具有一些 mootools 效果的 mootools。非常感谢任何帮助。

【问题讨论】:

  • 为什么不能只用 CSS3 来做呢?效果需要跨浏览器兼容吗?
  • @Asad 需要跨浏览器兼容

标签: javascript animation mootools


【解决方案1】:

this fiddle 对你有用吗? 编辑:我已经更改了链接,以便它根据需要使用转换 css 属性。

JavaScript:

window.myFx = new Fx({
        duration: 300,
        transition: Fx.Transitions.Sine.easeOut
});
myFx.set = function(value) {
        var style = "scale(" + (value) + ")";
        $('content-block').setStyles({
            "-webkit-transform": style,
            "-moz-transform": style,
            "-o-transform": style,
            "-ms-transform": style,
            transform: style
        });
    }
$('content-block').addEvent('mouseover', function() {
    myFx.start(1,1.4);
});
$('content-block').addEvent('mouseout', function() {
    myFx.start(1.4,1);
});

【讨论】:

  • 阿萨德感谢您的帮助。您会看到使用 css3 的解决方案,它将图像缩放到 1.4 我需要类似的东西。
  • Asad 正如我之前提到的,它必须与浏览器兼容。我看到一些电子商务网站在弹出图像的地方这样做,但不幸的是我不记得我自己可以做到的其他那些。感谢您的帮助。
  • 在我使用你特别要求的css3之前它是浏览器兼容的。如果不想使用css3,可以使用我提供的earlier example
猜你喜欢
  • 1970-01-01
  • 2015-06-01
  • 1970-01-01
  • 1970-01-01
  • 2014-12-15
  • 2015-07-07
  • 1970-01-01
  • 1970-01-01
  • 2013-05-06
相关资源
最近更新 更多