A New Start

Animating URL (URL 跑马灯)

一、效果

效果简言之就是在URL中实现动态效果,此处简介的是在URL中动态展示 emojis,效果见下视频。
效果可以访问 loop.chenkaikai.com/chick.html 查看。

二、实现

直接见下面代码,关键代码是: location.hash = XXXXX
即改变当前页面地址的 hash 值。
注:注意页面编码格式设置 utf-8

三、弊端及改进

最大的弊端就浏览器的历史记录惨不忍睹,但是可以使用隐身模式进行访问。
改进点可以考虑使用:replaceState() 和 pushState()

四、参考

视频:https://www.youtube.com/watch?v=4YZt4HEv48Y
文档:http://matthewrayfield.com/articles/animating-urls-with-javascript-and-emojis/
emoji:https://unicode.org/emoji/charts/full-emoji-list.html

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注