网页失去焦点标题变化效果

 

在牛客网上看到的，效果如下：

即当切换到其它的页面即我们的网页失去焦点的时候，网页的标题就会被改变，当再切换回来的时候，网页标题就会被复原。

二、效果实现

 1.借助I-Miss-You.js

有现成的插件叫做I-Miss-You.js，在切换到其它页面的时候会改变当前页面的标题和图标，其github地址：https://github.com/Bahlaouane-Hamza/I-Miss-You

或者将下面的js代码拷走即可（需要注意的是这个插件实依赖于jQuery的。）：

//     jquery.IMissYou.js 1.0.0

//     (c) 2015 Hamza Bahlaouane
//     jquery.IMissYou may be freely distributed under the MIT license.
//     For all details and documentation:
//     https://github.com/Bahlaouane-Hamza/I-Miss-You


// Uses CommonJS, AMD or browser globals to create a jQuery plugin.
(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node/CommonJS
        module.exports = function( root, jQuery ) {
            if ( jQuery === undefined ) {
                // require('jQuery') returns a factory that requires window to
                // build a jQuery instance, we normalize how we use modules
                // that require this pattern but the window provided is a noop
                // if it's defined (how jquery works)
                if ( typeof window !== 'undefined' ) {
                    jQuery = require('jquery');
                }
                else {
                    jQuery = require('jquery')(root);
                }
            }
            factory(jQuery);
            return jQuery;
        };
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {
    "use strict";

    $.iMissYou = function (options) {

        // Options
        var opts = $.extend( {}, $.iMissYou.defaults, options),
            origTitle = document.title,
            favicon = $('head').find('link[rel$="icon"]');
        var origFavicon = favicon.attr("href");


        // Preload favicon
        if(opts.favicon.enabled)
            preloadFavicon();

        // Watch for visibilitychange event
        $(document).bind("visibilitychange", function(){

            // Change title
            $(document).prop('title', (document.hidden) ? opts.title : origTitle);

            // Change favicon too ?
            if(opts.favicon.enabled){
                if($(document).prop('hidden'))
                    changeFavicon();
                else
                    revertFavicon();
            }
        });

        // Utilities
        function changeFavicon() {
            favicon.attr("href", opts.favicon.src);
        }
        function revertFavicon() {
            favicon.attr("href", origFavicon);
        }
        function preloadFavicon() {
            $('<img/>')[0].src = opts.favicon.src;
        }

    };

    // Default
    $.iMissYou.defaults = {
        title: "I Miss you !",
        favicon: {
            enabled: true,
            src:'iMissYouFavicon.ico'
        }
    };

}));

View Code