Question

我正在建立一个新闻网站（被要求提出新产品的设计），并决定利用这个机会作为一个机会，让自己更多地了解JavaScript。我在这个部门的知识是基本的，但我一直在试验jQuery插件，解构它们并尽可能多地学习。话虽如此，我希望这不是一个愚蠢的问题，或者我只是忽视的事情。

-

我正在寻找实现the same basic function USA TODAY has on its article photos，它会拍摄缩略图照片并在点击时调整图片大小/展开尺寸。在花了一些时间搜索jQuery插件后，我发现它唯一接近的是jQuery.popeye，这是一个好的开始，但不完全是我想要的。对于初学者，popeye不会调整图像大小，它从一个文件开始，在div扩展后，它会链接到一个新的更大的图像。此外，popeye的构建方式，图像容器是静态的，需要固定的高度 - 不适合新闻环境。

但是我继续把它添加到我的测试网站，所以我可以尝试将它分开，看看我是否可以根据我的需要轻松地重建它。 Here's what I have

我只是想知道是否有人知道那里是否有更好的插件，而不是试图调试我所做的事情？我可以学习哪些核心功能来自己尝试构建它？或者，如果有人知道今日美国使用的是什么？

感谢您的帮助。

Answer 1

如果不推荐使用工具，您可以自己做同样的事情而不需要太多努力。

如果你检查他们实际在做什么，那很简单，图像是全尺寸（大版本），他们只是调整div的大小。

这样：

<aside itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject" 
    class="single-photo expandable-collapsed" style="width: 180px;">
</aside>

只是animated来：

<aside itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject" 
        class="single-photo expandable-collapsed" style="width: 540px;">
 </aside>

注意width属性的变化。

所以javascript会很简单：

$('#clickelement').click(function() {
    $('picture').animate({
    width: 500
  }, 5000);
});

类似的功能可以再次调整它的大小。

jQuery插件类似于USA TODAY＆s的文章照片？

1 个答案: