开源中国愚人节网页变模糊的js blur代码

愚人节网页模糊效果

最新推荐文章于 2023-10-29 22:59:33 发布

原创最新推荐文章于 2023-10-29 22:59:33 发布 · 529 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#开源中国 #愚人节 #网页模糊 #blur #js代码

前端技术同时被 2 个专栏收录

67 篇文章

订阅专栏

16 篇文章

订阅专栏

本文介绍了一个有趣的愚人节玩笑——使网页逐渐模糊的JavaScript代码。通过逐步增加模糊程度来捉弄用户，最终提示休息并祝愚人节快乐。

原文：开源中国愚人节网页变模糊的js blur代码

源代码下载地址：http://www.zuidaima.com/share/1760962205699072.htm

14年愚人节打开OSCHINA，然后等了2秒钟，你会发现网页全变模糊了，刚以为是浏览器问题，然后看了网页源码。就是加了一段代码就能实现。呵呵分享给大家

<![if !IE]>
<script>    
/*
* by moli
*/
$(document).ready(function(){
  if(document.cookie.indexOf("lu=") == -1 ){
    // 延时2秒
    setTimeout("jQuery.mxblur.interID = setInterval('jQuery.mxblur.begin()', 5)", 1500);
  }
});

$.mxblur = {
    interID : null,
    num: 0.01,
    begin : function() {
        jQuery.mxblur.blur( jQuery.mxblur.num );
        if(jQuery.mxblur.num > 3) {
            jQuery.mxblur.num = 0;
          if(confirm("少年！是不是代码写多了？眼睛模糊了？")) {
             alert("太累啦，就该歇歇啦，愚人节快乐:)");
             clearInterval(jQuery.mxblur.interID );
             jQuery.mxblur.blur(0);
             document.cookie = "lu=lu";
          }
        }
        jQuery.mxblur.num = jQuery.mxblur.num  + 1 /100;
    },
    blur : function() {
        $("body").css("-webkit-filter","blur("+$.mxblur.num+"px)");
        $("body").css("-moz-filter","blur("+$.mxblur.num+"px)");
        $("body").css("-o-filter","blur("+$.mxblur.num+"px)");
        $("body").css("-ms-filter","blur("+$.mxblur.num+"px)");
        $("body").css("filter","blur("+$.mxblur.num+"px)");
        $("body").css("filter","url(blur.svg#"+ $.mxblur.num.toFixed(1) +")");
    }
}
</script>
<![endif]>