在网站外部链接旁边添加Favorite Icons的方法，基于MooTools or jQuery

By Rainbow on // jQuery , jQuery // 3497 Views+ // (0) Comments

最近，我碰见了一个如何检索页面上所有的外部链接的jQuery文章,很有意思。对于我来说，我很喜欢收藏一些很酷的网站，并且分类罗列出来，以方便以后使用，如果在链接地址的旁边配有这些网站的 favorite icon，那就更美了。From Liviu Holhoş 实现了此功能，我选择了不同的方法，使用CSS的background-image属性，设置为背景图片也是不错的办法。
此案例我是分别用 jQuery 和MooTools 库实现的。

：
mootools-or-jquery-favicon

原案例：The jQuery JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13

jQuery('a[href^="http://"]').filter(function(){
     return this.hostname && this.hostname !== location.hostname;
}).each(function() {
    var link = jQuery(this);
    var faviconURL =link.attr('href').replace(/^(http:\/\/[^\/]+).*$/, '$1')+'/favicon.ico';
    var faviconIMG = jQuery('<img src="favicon.png" alt="" />')['appendTo'](link);
    var extImg = new Image();
    extImg.src = faviconURL;
    if (extImg.complete)
      faviconIMG.attr('src', faviconURL);
    else
      extImg.onload = function() { faviconIMG.attr('src', faviconURL); };
});

原案例来自：From Liviu Holhoş – Blog

教程网址：http://blog.liviuholhos.com/javascript/add-a-favicon-near-external-links-with-jquery

简化过的案例：The jQuery JavaScript

1
2
3
4
5
6
7
8
9
10
11

jQuery(function($) {
   $('a[href^="http://"]').filter(function(){												  
       return this.hostname && this.hostname !== window.location.hostname;
   }).each(function(){
	   var link = $(this);	
       /* get the favicon */
	   var faviconURL =link.attr('href').replace(/^(http:\/\/[^\/]+).*$/, '$1')+'/favicon.ico';
       /* place it in the anchor */
	   link.css('background-image','url(' + faviconURL + ')').addClass('favicon');
   }); 	
});

简化过的案例：The MooTools JavaScript

1
2
3
4
5
6
7
8
9
10
11
12

window.addEvent('domready',function() {
	/* 获得所有完整的linked anchors */
	$$('a[href^="http://"]').each(function(a) {
		/* 如果不是在blog.moocss.com domain内，就执行以下操作*/
		if(!a.get('href').contains(location.host)) {
			/* get the favicon */
			var favicon = a.get('href').replace(/^(http:\/\/[^\/]+).*$/, '$1') + '/favicon.ico';
			/* place it in the anchor */
			a.setStyle('background-image','url(' + favicon + ')').addClass('favicon');
		}
	});
});

The CSS

<style>
.favicon { background-repeat:no-repeat; padding:2px 0 3px 22px; }
</style>

The HTML

1
2
3
4
5
6
7
8
9
10

<ul>
    <li><a href="http://blog.moocss.com/">blog.moocss.com</a></li>	
    <li><a href="http://davidwalsh.name/">davidwalsh.name</a></li>
    <li><a href="http://css-tricks.com/">css-tricks.com</a></li>
    <li><a href="http://google.com/">google.com</a></li>
    <li><a href="http://mootools.net/">mootools.net</a></li>
    <li><a href="http://jquery.com/">jquery.com</a></li>
    <li><a href="http://mozilla.com/">mozilla.com</a></li>
    <li><a href="http://digg.com/">digg.com</a></li>
</ul>

综合演示

演示：Demo

分享到： 更多

文章评论 已经有 0 条评论！

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

站点统计