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

13年前 15

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

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

超链接浮动窗口JQ效果

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

下面开始动手:

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、搞定!

是不是很简单?赶紧试试吧!

15 条评论

  1. #1

    不错,这个很漂亮!

  2. #2

    任何涉及代码的东西我都不敢动

  3. #3

    这个挺好的 又可以节省一个插件
    绿色的才是健康的
    HOHO

  4. #4

    好定西,收藏了。

  5. #5

    不错 👿

  6. #6

    有点新东西了唉,好久没动了。
    难得你还在继续更新。

  7. #7

    你这个主题的评论样式,越看越喜欢

    • @河河 呵呵,谢谢!不过有一点瑕疵,就是回复按钮,不是很好看

  8. #8

    特效太多,页面会慢