皇家元林

位置: 首页 > 给超链接添加漂亮的Sweet Titles效果代码版

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

Oct 2011 19

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

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

--转载请注明: 皇家元林 » 给超链接添加漂亮的Sweet Titles效果代码版

15条评论

  1. #-19

    不错,这个很漂亮!

  2. #-18

    呵呵,不仅漂亮还简单!

  3. #-17

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

  4. #-16

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

  5. #-15

    好定西,收藏了。

  6. #-14

    呵呵,我想这个不仅可以用于wp,其他程序也可以!

  7. #-13

    我也不会,只会简单的抠出来用~~~

  8. #-12
  9. #-11

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

  10. #-10

    是啊,没事发发牢骚,写写心情都可以的

  11. #-9

    和sweet title是一样的原理 很是喜欢啊 吼吼的顶起

  12. #-8

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

  13. #-7

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

  14. #-6

    特效太多,页面会慢

  15. #-5

    是的,所以得结合自己的实际情况。。。

  16. 发表评论

    (必填)

    823