标放到链接上就可以看到缩略图。
效果演示见本站首页
具体使用办法,
到snap网站可以申请到一段类似以下形式的代码:
<script defer id="snap_preview_anywhere" type="text/javascript" src="http://spa.snap.com/snap_preview_anywhere.js?ap=1&key=739080a127808f9856fa43a8c91c4d21&sb=1&domain=dimlau.com"></script>
将代码置于页面代码的</head>前面就可以了。(经测试,为不拖慢速度,放在</body>前也可以,)
下面说说代码的修改:
1、使用默认的代码,鼠标移动到链接上时显示的效果是带搜索框的,但是可以通过修改代码来去掉搜索框,先看效果对比:
修改方法是,将获得代码中的sb=1改成sb=0
2、默认代码效果是页面中的所有链接都有鼠标划过时显示缩略图效果。如果你想对某个特定链接禁用缩略图效果,可以对该链接加上一个分类来标识;
例如链接
<a href="xxxx">xxx</a>
,禁用缩略图的方法是写成
<a href="xxxx" class="snap_nopreview">xxx</a>
通常,一个页面里大部分链接我们都不想加入缩略图的,所以上述办法有点烦琐了。
其实可以通过修改代码中的ap=1为ap=0来使页面的所有链接在默认情况下不显示缩略图,这时只有链接写成以下格式的情况下才会有缩略图显示:
<a class="snap_preview" href="XXX">XXX</a>
对于上述各种情况,如果链接本身已经有了某个class分类,比如已经分类为class="123",可以用空格来分隔,并赋予多个class分类,比如
class="123 snap_nopreview"或者class="123 snap_preview"
以上为本人的一点小小心得,希望对各位看官有点帮助。
--------------------------------------------------------------------------------------------------------
对于我使用的MT,可以对模版中的评论者网站链接形式加入一个class="snap_preview"来实现对评论者网站界面的初步预览,我觉得是个不错的小工具。
当然其他程序,也可以做相应的修改实现该效果。我就不再多说了。
posted on 2007-12-20 10:36
周锐 阅读(254)
评论(0) 编辑 收藏 所属分类:
CSS 、
HTML 、
JavaScript