在一些论坛中,有时会看到一些类似印章的“精品”、“原创”、“推荐”之类的在页面上,似乎给页面盖了个邮戳/印章之类的,效果的确不错。于是呢,折腾两下给自己博客给写了一个,这里提供的是自己写的纯JS版本的,也不依赖于jQuery等库,完全原生。使用方法只要在中插入如下代码即可(以下为完整代码,注意仅在帖子页插入)。
<script charset="utf-8" data="012" eid="post-body" id="AopodTagStamp" ol="-50" ot="-10" src="http://aopod.googlecode.com/svn/trunk/pub/js/TagStamp.js" type="text/javascript" zindex="100">
</script>
参数说明:
data:在data="012"中的"012"分别表示:原创、精品、推荐,如果要更改优先级为推荐、原创、精品则改为data="201"即可,如果仅希望显示其中一个也只需更改为相应的表示即可,如仅希望显示原创则改为data="0"。不指定值则默认为:"012"。如果有更多的需要,请留言,我会对代码和图片进行进一步的扩充(但请注意,一次仅能显示一个标记)。
eid:对应所要相对的div或其他元素的id,在Blogger中,未指定则默认为"post-body-"。支持模糊查找,当然精确的是最好的。
ot:相对顶部的位移,为未指定值时的位置加上ot值,负值则为减。
ol:相对左边的唯一,为未指定值时的位置加上ol值,负值则为减。
zindex:相信对于常接触CSS的人不会陌生,未指定则为0。用于被一些遮罩层遮挡时所用,调高则优先显示在上方。
charset:由于标签上涉及到了字符集,所以如果页面上使用的是非UTF-8字符集的请保留此选项,否则可能出现乱码等情况,导致无法显示。
所以呢,通过上述说明,我们最简单的代码可以精简为:
<script charset="utf-8" id="AopodTagStamp" src="http://aopod.googlecode.com/svn/trunk/pub/js/TagStamp.js" type="text/javascript">
</script>
当然,由于需要调整位置,还是需要ot、ol参数辅助调整位置的。
对于Blogger用户:需要在帖子页插入可用以下代码:
<b:if cond='data:blog.pageType == "item"'>
<script id='AopodTagStamp' src='http://aopod.googlecode.com/svn/trunk/pub/js/TagStamp.js' type='text/javascript'/>
</b:if>
当然,还是注意通过ot、ol参数辅助调整位置,字符集有必要请切记使用UTF-8。
对于其他用户:需要注意的是需要在标签的链接的属性里面加上rel='tag',即可。
-----------后记----------
第一次写完代码之后在FireFox下面运行通过,也就没在IE下运行了。在发表文章后发现IE下面运行不能,赶紧修改代码。调试半天发现 for (...in...)语句似乎支持的很烂很烂,于是把所有的重写的一遍,总算是能正常的工作了。
调试环境:FireFox 10、Chrome 16、IE 9
没有评论:
发表评论
墙里秋千墙外道
[原生评论][微博评论箱]