分享一下网站的一些特效

在此之前不得不吐槽一下百度，有用的没搜到，倒是广告一大堆。之前有段时间（医院事件）没有广告的，不知道现在又有了。百度缺钱？他不缺，这是自己作践自己，终会自取灭亡的。现在必应也挺不错的。

言归正传，本网站主题是7TEC，觉得很不错，感兴趣的可以去他的博客看看。

看到左下角的小人物了吧，酷！其实是一个插件，详情点击这里，很厉害的一个小哥哥。emm，看到那逻辑简直头疼。。。

剩下的是一些js文件，在footer.php中引入就好了。注意z-index这个属性，其他的都问题不大，一个一个来。

一、离开网站更改标题

<script type="text/javascript">
var OriginTitile = document.title;
    var titleTime;
    document.addEventListener('visibilitychange',
    function() {
        if (document.hidden) {
            //注意把图标的地址换成自己的
            $('[rel="shortcut icon"]').attr('href', 'http://www.funnyrule.cn/usr/themes/7TEC/img/icon.png');
            document.title = '╥﹏╥...诶呦，这网站好矫情！';
            clearTimeout(titleTime);
        } else {
            $('[rel="shortcut icon"]').attr('href', 'http://www.funnyrule.cn/usr/themes/7TEC/img/icon.png');
            document.title = '^O^嘿嘿！你终于来了~' + OriginTitile;
            titleTime = setTimeout(function() {
                document.title = OriginTitile;
            },
            2000);
        }
    });
</script>

二、鼠标特效

<script type="text/javascript">
    var a_idx = 0;
    jQuery(document).ready(function ($) {
        $("body").click(function (e) {
            var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信",
                "友善");
            var $i = $("<span />").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
                y = e.pageY;
            $i.css({
                "z-index": 99999999999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "#ff6651"
            });
            $("body").append($i);
            $i.animate({
                    "top": y - 180,
                    "opacity": 0
                },
                1500,
                function () {
                    $i.remove();
                });
        });
    });
</script>

三、下雪特效

ps：这个js拖了网站四五十毫秒，就去掉了。

<script type="text/javascript">
(function($){
    $.fn.snow = function(options){
    var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-        index':'9999', 'top': '-50px'}).html('&#10052;'),
    documentHeight     = $(document).height(),
    documentWidth    = $(document).width(),
    defaults = {
        minSize        : 10,
        maxSize        : 20,
        newOn        : 1000,
        flakeColor    : "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
    },
    options    = $.extend({}, defaults, options);
    var interval= setInterval( function(){
    var startPositionLeft = Math.random() * documentWidth - 100,
    startOpacity = 0.5 + Math.random(),
    sizeFlake = options.minSize + Math.random() * options.maxSize,
    endPositionTop = documentHeight - 200,
    endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
    durationFall = documentHeight * 10 + Math.random() * 5000;
    $flake.clone().appendTo('body').css({
        left: startPositionLeft,
        opacity: startOpacity,
        'font-size': sizeFlake,
        color: options.flakeColor
    }).animate({
        top: endPositionTop,
        left: endPositionLeft,
        opacity: 0.2
    },durationFall,'linear',function(){
        $(this).remove()
    });
    }, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({ 
        minSize: 5, /* 定义雪花最小尺寸 */
        maxSize: 50,/* 定义雪花最大尺寸 */
        newOn: 300  /* 定义密集程度，数字越小越密集 */
    });
});
</script>

以下代码太长了，大家自己扒源码看吧，按F12。就像这样。

四、背景色特效

【ribbon.min.js】

五、烟花特效

【meme.js】
<canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>
【anime.min.js】
【fireworks.js】

六、评论框打字特效

【commentTyping.js】

七、鼠标更改默认样式

【pointer.js】
看到鼠标变成小圈圈，一直转，不要太炫酷。看国外的网站发现的，结果就自己用啦，那两个网明天我找找看发在评论区。
有小bug就那样吧，改不了了。。。
这个js下载之后，里面有备注，class类和id类写在相应的路径下面，没一定html基础的折腾起来会很难受

下面是css，写在style.css中

八、文字跳动

看网站最底部，没想到css就能实现。把类名替换成自己的哦。

.text_beat span{  
    position: relative;  
}  

.text_beat span:nth-child(1){  
    -webkit-animation:jump 1s linear 0s infinite alternate;  
}  

.text_beat span:nth-child(2){  
    -webkit-animation:jump 1s linear 0.2s infinite alternate;  
}  

.text_beat span:nth-child(3){  
    -webkit-animation:jump 1s linear 0.4s infinite alternate;  
}  

.text_beat span:nth-child(4){  
    -webkit-animation:jump 1s linear 0.6s infinite alternate;  
}  

.text_beat span:nth-child(5){  
    -webkit-animation:jump 1s linear 0.8s infinite alternate;  
}  


@-webkit-keyframes jump  
{  
    0%{  
        top:0px;  
        color:red;  
    }  
    50%{  
        top:-10px;  
        color:green;  
    }  
    100%{  
        top:10px;  
        color:blue;  
    }  
}

有不懂的可以问我，js加多了网站肯定有延迟，是好是坏自己斟酌。

×

烟尘

(๑＞ڡ＜)☆谢谢老板~

2元 5元 10元 50元 100元 任意金额

2元

使用微信扫描二维码完成支付