atvImg

atvImg

atvImg = 'AppleTV 图像' 由 http://drewwilson.com 制作

这个轻量级 (2kb) 插件会自动将您的分层 Apple TV PNG 图片转换为 3D平行移动图标,与新款 Apple TV 处理应用程序图标的方式相同。 您可以在网页上添加任意数量的 AppleTV 图像。 没有依赖项,这个插件只是纯粹的 vanilla JavaScript。适用于所有 主要浏览器。甚至支持触摸和移动设备。 可以在以下链接中查看此插件的实时示例:http://kloc.pm 这里有一个视频解释了它的工作原理: http://d.pr/v/18YXv 这里有一个展示触摸/移动设备支持的视频: http://d.pr/v/1k2Ju

以下是如何为单个 atvImg 设置 HTML:

   

</div>

您可以有多个'.atvImg-layer'元素。因此，请根据图标的需要添加多个元素。请务必使用 2x (Retina) 缩放的 PNG 图像。插件会将 1x 屏幕缩小。建议使用 2x 缩放的 PNG 图像，以便在 2x 屏幕上显示清晰的图标。图层图像的大小应为您要显示图标的 2 倍。插件会将atvImg调整为其父元素的大小。因此，如果将`.atvImg'元素设置为 320px X 190px，图标的大小就将为该值。如果将其设置为 640px X 380px，图标的大小也将为该值。请务必为 AppleTV 图标使用正确的宽高比。

上面的 `` 元素是一个备用方案,如果 JavaScript 不能运行,则会使用它。当插件运行时,它将被删除。将您的图标的扁平版本(无图层)放入其中。然后在 <script> 标签或 JS 文件中调用该函数,如下所示: