给站点增加一个愚人节彩蛋!网站页面全部翻转

给站点增加一个愚人节彩蛋!网站页面全部翻转

4月1日,今天是愚人节,站长祝大家愚人节快乐!

既然是愚人节嘛,那就要整点好玩的功能

废话不多说,看效果:

给站点增加一个愚人节彩蛋!网站页面全部翻转插图1

整个页面都倒过来了,包括logo。把下面代码添加到footer.php文件即可,一定要添加到网站底部文件哦

<script>  
if (!mkReaddata("fool")) {  // 如果没有触发过彩蛋  
    document.body.classList.add('mk-fool-egg');     // 给 body 增加彩蛋 class  
    window.setTimeout(function () {     // 定时退出彩蛋  
        mkSavedata("fool", "fool");     // 记录彩蛋已被执行  
        alert("恭喜发现愚人节彩蛋 :)");     // 弹窗(这里可以自己发挥)  
        document.body.classList.remove('mk-fool-egg');  
    }, 5000);   // 这里的 5000 代表 5s,也就是经过 5s 后弹窗,并退出彩蛋  
}  
  
// 写入 Cookie  
function mkSavedata(key, data) {  
    key = 'mk_' + key;  
    data = JSON.stringify(data);  
    if (window.localStorage) {  
        localStorage.setItem(key, data);  
    }  
}  
  
// 读取 Cookie  
function mkReaddata(key) {  
    if (!window.localStorage) return '';  
    key = 'mk_' + key;  
    return JSON.parse(localStorage.getItem(key));  
}  
</script>  
  
<style>  
/* 彩蛋样式 */  
.mk-fool-egg {  
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);  
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);  
    transform: matrix(-1, 0, 0, 1, 0, 0);  
    -o-transform: skew(0deg, 180deg) scale(-1, 1);  
    filter:progid: DXImageTransform.Microsoft.BasicImage(mirror=1);  
}  
</style>

根据cookies来决定弹窗,一个cookies仅弹窗一次,对用户体验比较友好,感兴趣的小伙伴去试试吧~

分享到 :
相关推荐

发表评论

Your email address will not be published. Required fields are marked *