如何在网页中实现动态磁贴效果

html-css028

如何在网页中实现动态磁贴效果,第1张

可以通过HTML5以及CSS(外观)+JS(动态)来实现网页中的动态磁贴效果。

具体操作方法如下:

1、网站的动态磁贴受定期通知的支持,其中平台将以预定义的轮询间隔,从服务器上托管的轮询 URI中提取文本和图像,并在该网站的磁贴中显示这一内容。

2、通过以下三种方法之一,来添加网站的磁贴支持:通过网页上的 META标记、通过创建清单文件或通过 JavaScript API。

下面是网站使用 META标记设置其 Windows8.1的磁贴的示例:

<meta name="application-name" content=" CenturyCutCook"/><meta name="msapplication-TileColor" content="#009900"/>

<!-- Logos for all four tile sizes--><meta name="msapplication-square70x70logo" content="smalltile.png"/><meta name="msapplication-square150x150logo" content="mediumtile.png"/><meta name="msapplication-wide310x150logo" content="widetile.png"/><meta name="msapplication-square310x310logo" content="largetile.png"/>

<!-- Notification URL--><meta name="msapplication-notification" content="frequency=30polling-uri=1.xmlpolling-uri2=2.xmlpolling-uri3=3.xmlpolling-uri4=4.xmlpolling-uri5=5.xml"/>

此示例中定义的轮询 URI包含要显示的通知内容,并且将每半个小时轮询一次。因此,在特定的30分钟间隔内,用户可以查看最多5个来自此网站的更新,从而使您的用户始终可与您的网站保持密切联系。

4、轮询 URI包含遵循预定义模板的 XML标记。这些模板对于网站和 Windows应用都是相同的,并且可以控制磁贴的外观。模板可以是基于文本、基于图像或全部。下面的示例包括一个轮询 URI,其具有中等磁贴尺寸、宽形磁贴尺寸和大磁贴尺寸(注意大磁贴尺寸在 Windows中受支持,而非 Windows Phone)的绑定。

userContent.css(找到这个文件,印象里需要自己建,网上应该有教程)

@-moz-document url("about:newtab") {  

.newtab-cell {width:100px !importantheight:100px !important}

}

100px是我随便写的,你可以自己调整,当然about:config里也需要调整就是了

"如果对默认的磁贴不满意,还可以手动提供更高分辨率的视觉效果。

自定义网站头部中的meta标记,可以自定义背景颜色和图片。

<meta name=""msapplication-TileImage"" content=""images/benthepcguy-144.png""/>

<meta name=""msapplication-TileColor"" content=""#d83434""/>

磁贴图像的大小是固定的,144px*144px的方形PNG,建议使用透明背景已达到最佳效果,可以使用 CSS 的 #rrggbb 表示法将磁贴颜色指定为十六进制 RGB 颜色。"