jQuery插件类似于《今日美国》's的文章照片

jQuery plugn similar to USA TODAY's article photos?

本文关键字：照片 文章 类似于 插件 今日美国 美国 今日 jQuery      更新时间：2023-09-26

我正在建设一个新闻网站（被要求设计一个新产品），并决定利用这个机会自学更多关于JavaScript的知识。我在这个部门的知识是基本的，但我一直在尝试jQuery插件，通过解构它们并尽可能多地学习。话虽如此，我希望这不是一个愚蠢的问题，或者我只是忽略了什么。

--

我希望在其文章照片上实现与《今日美国》相同的基本功能，该功能可以拍摄缩略图并在点击时调整/扩展图像。在花了一些时间搜索jQuery插件后，我发现唯一接近它的是jQuery.popeye，这是一个很好的开始，但并不完全是我想要的。首先，popeye不调整图像的大小，它从一个文件开始，在div展开后，它链接到一个新的、更大的图像。此外，popeye的构建方式是，图像容器是静态的，需要固定的高度——这对于新闻环境来说并不理想。

但我继续把它添加到我的测试站点，这样我就可以试着把它拆开，看看我是否可以根据我的需求轻松地重建它。这是我的东西。

与其试着调试我所做的，我只是想问是否有人知道是否有更好的插件？我可以学习哪些核心功能来尝试自己构建它？或者，如果有人知道《今日美国》使用了什么？

谢谢你的帮助。

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

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

所以：

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

只是动画设置为：

<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);
});

还有一个类似的功能，可以再次将其缩小。

相关文章：