yMoo主题是目前我最喜欢的主题,而且也是最稳定的一款,都一个月了才更新。当然不是没有问题,只是本人一懒二忙也就没及时更新,是在对不住了。刚刚已经更新完毕,荒淫大家围观[点此穿越]。
zou.lu的Sweet Titles插件做的不错,但是插件嘛,越少越好,我也就没用了。前段时间帮人做主题,觉得这样的效果就很不错,所以就抠出来分享一下,同时也做个笔记吧。并且已经应用于yMoo主题。看图:
这样的效果我想很多人都见过的,菜鸟级别,老鸟就飞过吧!
下面开始动手:
1、下载此JS代码插件,并在</head>前调用此插件
2、在</head>前再添加如下代码
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效果代码版
不错,这个很漂亮!
13年前 · 赤峰 · Unknown Unknown
@yalon 呵呵,不仅漂亮还简单!
13年前 · 合肥 · Unknown Unknown
任何涉及代码的东西我都不敢动
13年前 · 北京 · Unknown Unknown
@张无计 我也不会,只会简单的抠出来用~~~
13年前 · 合肥 · Unknown Unknown
这个挺好的 又可以节省一个插件
绿色的才是健康的
HOHO
13年前 · 洛阳 · Unknown Unknown
@心淡若水 呵呵,我想这个不仅可以用于wp,其他程序也可以!
13年前 · 合肥 · Unknown Unknown
@皇家元林 和sweet title是一样的原理 很是喜欢啊 吼吼的顶起
13年前 · 洛阳 · Unknown Unknown
好定西,收藏了。
13年前 · 重庆 · Unknown Unknown
不错 👿
13年前 · 上海 · Unknown Unknown
有点新东西了唉,好久没动了。
难得你还在继续更新。
13年前 · 西安 · Unknown Unknown
@赏乐 是啊,没事发发牢骚,写写心情都可以的
13年前 · 合肥 · Unknown Unknown
你这个主题的评论样式,越看越喜欢
13年前 · 太原 · Unknown Unknown
@河河 呵呵,谢谢!不过有一点瑕疵,就是回复按钮,不是很好看
13年前 · 合肥 · Unknown Unknown
特效太多,页面会慢
13年前 · 伊春 · Unknown Unknown
@朗乡 是的,所以得结合自己的实际情况。。。
13年前 · 合肥 · Unknown Unknown