文章

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

主要作用

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

效果预览

把本站的网页再打开一个就可以看见效果了

具体方法

  1. 下载jquery.iMissYou.js,它的github地址:https://github.com/Bahlaouane-Hamza/I-Miss-You
  2. 或者复制以下代码到js
// 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'
}
};

}));
简单使用的话只需要在页面中引入jquery.iMissYou.js,然后设定需要改变的标题,注意如果使用favicon的话需要本来就有一个favicon才可以,我用的是默认的例子,如下:
<link rel="shortcut icon" href="favicon.ico"/>
<script src="/js/jquery.iMissYou.js"></script>
<script>
jQuery(document).ready(function($){
$.iMissYou({
title: "I Miss you !",
favicon: {
enabled: true,
src:'/image/iMissYouFavicon.ico'
}
});
});
</script>
[/v_xuk]把以上代码放入[header.php],注意以上<script src="/js(修改为自己存放的位置)/jquery.iMissYou.js"></script>,这里src:'/image(修改为自己存放的位置)/iMissYouFavicon.ico'[/v_xuk]

 

暂无评论

发表评论