受欢迎：
 在AWS上构建弹性系统：了解如何在AWS上设计和实现弹性、高可用性、容错的基础设施。

MooTools Zoomer插件

由上的 

MooTools图像缩放

我喜欢看看MooTools Forge。作为一个创建大量插件的人，我很高兴看到其他开发人员正在创建什么，甚至可能我可以如何改进他们。我发现了一个很棒的插件Zoomer公司安东·萨莫伊洛夫。Zoomer提供了一种优雅的放大大图像的方法。

查看演示

HTML

<img src=“cricci.jpg”alt=“Muse:Christina Ricci”big=“cricci-large.jpg”id=“Ricci”/>

请注意，图像中的大属性是放置到较大图像的路径的位置。这是插件的默认用法——您还可以在插件实例选项对象中提供指向较大图像的路径。

MooTools JavaScript

window.addEvent（'domready'，function（）{新Zoomer（'ricci'，{平滑：10/*，big:'cricci-large.jpg'*/})；})；

使用Zoomer与上面的代码一样简单——只需提供图像的ID和自定义平滑设置。如上所述，您还可以在实例中定义较大的图像路径。

查看演示

甜美的哈？我对Anton出色的插件赞不绝口。我喜欢这个插件实现起来有多容易。不过请记住，Zoomer只是MooTools锻造你的插件在Forge中吗？

请求度量实际用户监控
请求度量实际用户监控
请求度量实际用户监控
请求度量实际用户监控

最近的功能

  • 由
    我们其他人的正则表达式

    迟早你会遇到一个正则表达式。由于语法晦涩难懂，文档混乱，学习曲线庞大，大多数开发人员都习惯于从StackOverflow中复制和粘贴它们，并希望它们能正常工作。但如果你能解码正则表达式并利用它们的威力，该怎么办呢？在…中。。。

  • 由
    创建CSS多维数据集

    CSS立方体真正展示了CSS多年来的发展，从简单的颜色和维度指令发展成为一种能够创建深度、创造性视觉效果的语言。添加动画，你会得到一些非常整洁的东西。不幸的是，我读过的每个CSS多维数据集教程都有点。。。

令人难以置信的演示

  • 由
    使用Dojo Toolkit的Digg-Style动态共享小部件

    我一直认为Digg是一个非常进步的网站。Digg使用实验性的、ajax化的方法来实现评论和关键任务功能。Digg给他们的网站添加了一个不错的点子，那就是他们的悬停共享小部件。以下是如何在您的站点上实现该功能。。。

  • 由
    使用CSS或jQuery或MooTools JavaScript的谷歌扩展效果

    Google和Mozilla这两个伟大的浏览器供应商都有Extensions页面，它们利用简单但优雅的动画效果来增强页面。谷歌使用的扩展之一是一个基本的边距顶部动画，可以在两个窗格之间切换：一个图形窗格。。。

讨论

  1. 多塞

    伟大而有用的插件！
    是否有机会使用与jQuery等效的插件？

  2. 穆罕默德·贾马

    真是太棒了！

  3. 法比奥·科斯塔

    非常非常整洁，鼠标移出时的褪色效果很好。安东·萨莫约洛夫和DW，MT FTW！

  4. 死亡博士

    效果很好

  5. 鲍里斯

    太棒了！

  6. 奥利维尔

    很好，我喜欢这种效果，比通常在原始图像顶部有一个小缩放框的缩放效果要好得多

  7. 迪夫

    平滑效果，尽管我认为您现在应该添加一个CR类别…

  8. 汉堡包

    你好，大卫，
    那真是太棒了。
    也许你可以用你的尼娜·里奇幻灯片展示给我们看。

  9. JOem（约姆）

    路要走…。我必须想在我的摄影网站上包含/使用它

  10. 弗朗西斯科

    引用dose，exist插件jquery？：）

  11. 布巴

    你好，大卫，

    剧本不错！

    只是对鼠标事件的一点评论：）

    从可用性的角度来看，我认为最好在鼠标悬停缩放时禁用单击和拖动。

    通常人们不会理解新型光标的含义，所以他们会单击并经常单击和拖动。

    在脚本中，当鼠标悬停并单击时，拇指会出现在大（缩放）图像上。

    这是一张屏幕快照http://i.imgur.com/PSjLJ.jpg

    我相信你所创造的比我在这里写的更伟大，也许并不重要，但绝对有用。

    T4A型
    继续努力！

  12. 莫罗

    jQuery端口http://github.com/creaven/zoomer-jq/

  13. 弗朗西斯科

    @莫罗：嗨，使用mozilla firefox，不要使用internetexplorer7：(

  14. 摩洛哥

    固定的，固定的________________

  15. 弗朗西斯科

    谢谢：）做得很好！！

  16. hnal公司

    嗨，有没有办法通过javascript更改大图像？我正在尝试建立一个具有图片+缩放功能和缩略图的图库。但我只能更改src图片。

    这不起作用：

    函数changepics（ref）{document.getElementById（'zoom'）.src=ref；document.getElementById（'zoom'）.setAttribute（'big'，ref）；新Zoomer（'zoom'，{big:ref，smooth:10}）；}

    谢谢，
    hnal公司

  17. 萨马吉特·森

    很酷很有吸引力

  18. 萨马吉特·森

    非常凉爽有效

  19. 卢基

    @hnal公司：

    我也有同样的问题…你找到解决办法了吗？

  20. hnal公司

    @卢基：

    你好，我仍然被这个问题困扰着。当有人点击缩略图时，我正试图重新加载整个页面。。

    和你？

    • 克利夫夫

      这是我的方式。希望能得到帮助。
      1.保留Zoomer实例的引用。

      var imgZoom=新Zoomer（'mainImage'）；

      2.当你想改变大局时，就这样做。

      imgZoom.big.set（'src'，'新大图片的路径'）；
    • hnal公司

      谢谢你的回复！我试过你的解决方案，但我没能成功！你有它在哪里工作的完整例子吗？

  21. 客人

    很棒的插件！！！
    你能换张图片演示吗？
    它吓坏了我…

    • 克利夫夫

      试试这个：

      var imgZoom=新Zoomer（'mainImage'）；imgZoom.big.set（'src'，'新大图片的路径'）；
  22. Zaphod BEEBLEBROX公司

    这个插件有问题，我在rails 2.3.8上工作，这个插件用id=>“_”重新提交当前页面…并导致活动RecordNotFound:-/

  23. Xcellence-IT公司

    我也有类似的问题，当与prettyphoto–jquery lightbox alternative一起使用时，背景设置为（_），应用于内联样式会导致问题、错误和缩放根本不起作用。

    请访问以下网址：
    http://projects.xcellence-it.com/rahulraj-prettyphoto-zoomer公司/

    将鼠标悬停在第一个/顶部项目框上，该框将打开滑块，然后单击“位置平面图”。这个实现变焦器的开放iframe。

    缩放有时有效，有时在FF中无效。

    在IE中，这只是第一次起作用。

    请帮助我们解决这个问题…

    当做
    克鲁纳尔

  24. Xcellence-IT公司

    只是一个更新，我没有使用Rail。我的只是一个纯粹的xhtml项目。但这导致了错误，因此在使用prettyphoto iframe时变焦器无法工作。

  25. 马丁

    很不错的。这也适用于较大图像中的图像地图吗？

  26. 米迦列天使

    你好！

    很不错的！我喜欢！

    所以我用过了！

    但不知何故，它无法正常工作：
    在Mozilla Firefox中它是完美的，但只有在家里的PC上才能在IE上看到。当我把它上传到服务器上并用IE查看时，放大的图片是垂直扭曲的。

    我不知道为什么？？？

    谢谢你给我出主意

  27. 卡西米尔

    也许值得注意的是：Zoomer插件在最新的MooTools 1.3版本中不能100%工作（我曾尝试过Zoomer 1.9.3.，这是我能找到的最新版本）。
    然而，对此的修复很小：

    第149行：
    $clear（this.timer）；

    应该是：

    clearTimeout（this.timer）；

    $clear已被弃用，导致stopZoom功能停止工作，因此图片保持缩放状态。

  28. 阿尔芬约

    嗨，大卫！
    有没有一种方法可以在一个页面上缩放多个图像，而不必为每个id或每个新图像使用nev缩放器？每个图像只有一个类。
    前任。

    新Zoomer（'.multipleimg'）；

    谢谢

    • 阿尔芬约

      对不起的！
      我是新来的，所以我穿上了：）

    • Alpinyo公司

      嗨，大卫！

      有没有一种方法可以在一个页面上缩放多个图像，而不必为每个id或每个新图像使用nev缩放器？每个图像只有一个类。
      前任。

      新Zoomer（'.multipleimg'）；

      img src=img1.jpg class=multipleimg big=img1big.jpg

      img src=img2.jpg class=集思广益big=img2big.jpg

      等……。
      再次感谢

      对不起，我又在发帖了。我是新手，请原谅我的笨拙。也许你可以删除我以前的帖子。

  29. 莫罗

    ony-image–一个缩放器，为每个图像迭代并创建新的zoomer。

    • 阿尔芬约

      是否有一种方法可以在每次添加新图像时自动迭代java脚本代码？（为了方便起见）

  30. 曾卡

    你好，

    我是法国人，为这个剧本感到高兴。
    我有一个问题。

    可以用class=“ricci”更改“id=”ricci“吗？

    我出错了

    initialize:函数（元素，选项）{
    this.setOptions（选项）；
    this.small=文档.id（元素）；

    文档.id。

    请告诉我一个类的代码是什么？

    谢谢

将代码打包<pre-class=“{language}”></pre>标签，链接到GitHub要点、JSFiddle提琴或CodePen笔进行嵌入！