外部链接缩略图服务–折腾ing

上一个模板中我就加入这个功能。尝尝鲜!~还不错的。。

效果: 当鼠标指向一个链接, 鼠标右下方会显示该网页截图. 在留言功能上尤其好用, 

当鼠标停在名字上, 就可预览到留言者的网页缩略图

其实这个功能在Wordpress以前就用了。。

方法如下:

这个先去注册一下, 然后footer中挂一个他的连接

注册后, 您可透过该帐号取得外部连结网站缩图的权限,这也就表示你无须每次更新缩图, 都能取得该网站的最新缩图.

然后加载js代码

/* webshot */
var bgImg  = ’img/bg.png’, // 要改?你的 bg.png 位址
    bgSize = ’width:150px;height:120px;’,
    thumb  = ’http://open.thumbshots.org/image.aspx?url=’,
    tmSize = ’width:120px;height:90px;’,
    margin = ’margin:23px 0 0 21px;’;
$(’.vcard a, .blogroll a, .entry p a’).mouseover(function() {
if ($(this).attr(’href’).indexOf(’http’) == -1 || $(this).attr(’href’).indexOf(location.hostname) != -1) return false;
$(’#footer’).after(’<div id="webshot" ><img src="’ + thumb + $(this).attr(’href’).toLowerCase() +’"  /></div>’);
if ($.browser.msie) {$(’#webshot’).show()} else {$(’#webshot’).css({opacity: .9}).fadeIn(500)}
}).mousemove(function(e) {$(’#webshot’).css( {left: e.pageX + 15, top: e.pageY + 15} )
}).mouseout(function() {if ($.browser.msie) {$(’#webshot’).remove()} else {$(’#webshot’).fadeOut(800, function() {$(this).remove()})}
});

把上段 js 放在 jQuery(document).ready(function($) { ... }); 之间, 而且记得要先挂上 jQ 库.

下面是适用于 Thumbshots 的 bg.png, 请另存图片到你的服务器上.

外部链接缩略图服务--折腾ing


注意

Thumbshots 速度很快, 可以不用缓存, 这样可减少本地服务器的流量和空间的耗用, 但最大缺点是 Thumbshots 缩图迟迟不更新..

转自:微狐网

您可以选择一种方式赞助本站

    A+
发布日期:2011年07月04日
标签:

目前评论:12   其中:访客  9   博主  3

  1. 2010年10月01日 16:33  沙发
  2. 2010年10月01日 13:24  板凳
  3. 2010年10月01日 11:52  地板
  4. 2010年10月01日 16:43  4楼
  5. 2010年10月01日 16:47  5楼
  6. 2010年10月01日 16:41  6楼
  7. 2010年10月01日 13:34  7楼
  8. 2010年10月01日 15:13  8楼
  9. 2010年10月01日 16:26  9楼
  10. 2010年10月01日 16:34  10楼
  11. 2010年10月01日 16:58  11楼
  12. 2010年10月01日 16:10  12楼
评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: