0

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

--

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

但我继续将它添加到我的测试站点，这样我就可以尝试将它分解，看看我是否可以根据我的需要轻松地重建它。这就是我所拥有的。

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

谢谢你的帮助。

4

1 回答 1

0

如果不推荐执行此操作的工具，您可以自己做同样的事情而无需太多努力。

如果您检查他们在那里实际做了什么，这很简单，图像是全尺寸（大版本），他们只是调整 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>

注意宽度属性的变化。

所以javascript会很简单，比如：

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

还有一个类似的功能来重新调整它的小。

于 2013-08-12T14:31:02.583 回答