我正在建设一个新闻网站(被要求设计一个新产品),并决定利用这个机会自学更多关于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);
});
还有一个类似的功能,可以再次将其缩小。