查看“Widget:视觉模糊”的源代码

<includeonly><style>
body {
    transition: all linear 1s;
}
body.blur {
    -webkit-filter: blur(.7px);
    -moz-filter: blur(.7px);
    -o-filter: blur(.7px);
    -ms-filter: blur(.7px);
    filter: blur(.7px);
    transform: translate3d(0, 0, 0);
    /* Force Hardware Acceleration*/
}
.toggleBlur {
    transition: all linear .37s;
    -webkit-user-select: none;
    width: 20px;
    padding: 5px 0;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    text-align: center;
    position: fixed;
    _position: absolute;
    right: 0;
    _bottom: "auto";
    cursor: pointer;
    opacity: .6;
    filter: Alpha(opacity=60);
}
</style>
<div title="切换模糊" class="toggleBlur">切换模糊</div>
<script>
window.RLQ.push(function() {
    $(function() {
        $(".toggleBlur").appendTo('body').on("click", function() {
            $("body").toggleClass("blur");
        });
        $("body").addClass("blur");
        $(window).on({
            scroll: function() {
                if ($('body.blur')[0]) $(".toggleBlur").removeAttr('style').css({
                    position: 'absolute',
                    top: $(window).height() - 7 - $(".toggleBlur").height() + $(document).scrollTop() + "px"
                });
                else $(".toggleBlur").removeAttr('style').css('bottom', "7px");
            },
            resize: function() {
                $(window).scroll();
            }
        }).resize();
    });
});
</script>
</includeonly>
<noinclude>{{#widget:视觉模糊}}{{doc|content=仅用于[[模板:视觉模糊]]。}}</noinclude>