如何在网页中实现动态磁贴效果
发布网友
发布时间：2022-04-20 09:47
共2个回答
热心网友
时间：2023-06-27 13:25
可以通过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=30; polling-uri=1.xml; polling-uri2=2.xml; polling-uri3=3.xml; polling-uri4=4.xml; polling-uri5=5.xml"/>
此示例中定义的轮询 URI包含要显示的通知内容，并且将每半个小时轮询一次。因此，在特定的30分钟间隔内，用户可以查看最多5个来自此网站的更新，从而使您的用户始终可与您的网站保持密切联系。
4、轮询 URI包含遵循预定义模板的 XML标记。这些模板对于网站和 Windows应用都是相同的，并且可以控制磁贴的外观。模板可以是基于文本、基于图像或全部。下面的示例包括一个轮询 URI，其具有中等磁贴尺寸、宽形磁贴尺寸和大磁贴尺寸（注意大磁贴尺寸在 Windows中受支持，而非 Windows Phone）的绑定。
热心网友
时间：2023-06-27 13:26
看上去好像很复杂其实不复杂，主要是CSS(外观)+JS(动态)实现
