给超链接添加漂亮的Sweet Titles效果代码版

皇家元林 — Wed, 19 Oct 2011 02:42:28 +0000

yMoo主题是目前我最喜欢的主题，而且也是最稳定的一款，都一个月了才更新。当然不是没有问题，只是本人一懒二忙也就没及时更新，是在对不住了。刚刚已经更新完毕，荒淫大家围观[点此穿越]。

zou.lu的Sweet Titles插件做的不错，但是插件嘛，越少越好，我也就没用了。前段时间帮人做主题，觉得这样的效果就很不错，所以就抠出来分享一下，同时也做个笔记吧。并且已经应用于yMoo主题。看图：

超链接浮动窗口JQ效果

这样的效果我想很多人都见过的，菜鸟级别，老鸟就飞过吧！

下面开始动手：

1、下载此JS代码插件，并在前调用此插件

2、在前再添加如下代码

3、添加CSS样式

/* TipTip CSS - Version 1.2 */
#tiptip_holder {display: none;position: absolute;top: 0;left: 0;z-index: 99999;}
#tiptip_holder.tip_top {padding-bottom: 5px;}
#tiptip_holder.tip_bottom {padding-top: 5px;}
#tiptip_holder.tip_right {padding-left: 5px;}
#tiptip_holder.tip_left {padding-right: 5px;}
#tiptip_content {font-size: 11px;color: #fff;text-shadow: 0 0 2px #000;padding: 4px 8px;border: 1px solid rgba(255,255,255,0.25);background: rgb(25,25,25);background: rgba(25,25,25,0.92);background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;box-shadow: 0 0 3px #555;-webkit-box-shadow: 0 0 3px #555;-moz-box-shadow: 0 0 3px #555;}
#tiptip_arrow, #tiptip_arrow_inner {position: absolute;border-color: transparent;border-style: solid;border-width: 6px;height: 0;width: 0;}
#tiptip_holder.tip_top #tiptip_arrow {border-top-color: #fff;border-top-color: rgba(255,255,255,0.35);}
#tiptip_holder.tip_bottom #tiptip_arrow {border-bottom-color: #fff;border-bottom-color: rgba(255,255,255,0.35);}
#tiptip_holder.tip_right #tiptip_arrow {border-right-color: #fff;border-right-color: rgba(255,255,255,0.35);}
#tiptip_holder.tip_left #tiptip_arrow {border-left-color: #fff;border-left-color: rgba(255,255,255,0.35);}
#tiptip_holder.tip_top #tiptip_arrow_inner {margin-top: -7px;margin-left: -6px;border-top-color: rgb(25,25,25);border-top-color: rgba(25,25,25,0.92);}
#tiptip_holder.tip_bottom #tiptip_arrow_inner {margin-top: -5px;margin-left: -6px;border-bottom-color: rgb(25,25,25);border-bottom-color: rgba(25,25,25,0.92);}
#tiptip_holder.tip_right #tiptip_arrow_inner {margin-top: -6px;margin-left: -5px;border-right-color: rgb(25,25,25);border-right-color: rgba(25,25,25,0.92);}
#tiptip_holder.tip_left #tiptip_arrow_inner {margin-top: -6px;margin-left: -7px;border-left-color: rgb(25,25,25);border-left-color: rgba(25,25,25,0.92);}

4、搞定！

是不是很简单？赶紧试试吧！

版权声明: 本文采用 BY-NC-SA 协议进行授权，如无注明均为原创，转载请注明转自皇家元林
本文链接: 给超链接添加漂亮的Sweet Titles效果代码版

Sweet Titles相关文章列表 | 皇家元林

给超链接添加漂亮的Sweet Titles效果代码版