《双陈记》情侣博客

位置:主页 > 折腾WP > 链接提示效果(ie实现css3里的圆角和阴影)

链接提示效果(ie实现css3里的圆角和阴影)

 之前在《双陈记》情侣博客中用过一个漂亮的链接提示插件niceTitle,见文章《jquery的超链接提示插件niceTitle》。改版后的《双陈记》情侣博客为了减少插件,为情侣博客提速,就把这个niceTitle插件卸载了。之后这一段时间总感觉没有那个漂亮的链接提示,始终缺少点什么似的。今天在木木木童鞋那里看到有免插件代码版的链接提示,就CP了过来。

首先要加载jQuery的库文件:<script type="text/javascript" src="http://xxx/js/jquery.js"></script>
然后把jQuery代码放到footer里或存为单独的一个Js文件,代码如下:

<script type="text/javascript">
jQuery(document).ready(function($){
$("a").mouseover(function(e){
this.myTitle = this.title;
this.myHref = this.href;
this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"…" : this.myHref);
this.title = "";
var tooltip = "<div id='tooltip'><p>"+this.myTitle+"<em>"+this.myHref+"</em>"+"</p></div>";
$('body').append(tooltip);
$('#tooltip').css({"opacity":"0.8","top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"}).show('fast');
}).mouseout(function(){this.title = this.myTitle;$('#tooltip').remove();
}).mousemove(function(e){$('#tooltip').css({"top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"});
});
});
</script>
最后就剩css代码了:

#tooltip {position:absolute;z-index:1000;max-width:250px;word-wrap:break-word;background:#333;text-align:left;padding:5px;min-height:1em;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow: 5px 5px 10px #000;   -webkit-box-shadow: 5px 5px 10px #000; box-shadow: 5px 5px 10px #000;behavior: url("http://www.love730.com/wp-content/themes/love_zz/ie-css3.htc")}
#tooltip p {color:#fff;font:12px 'Microsoft YaHei',Arial,宋体,Tahoma,Sans-Serif;}
#tooltip p em {display:block;margin-top:3px;color:#ffff60;font-style:normal;}

效果可以根据自己博客的主题去自行美化,我的就加了一点阴影,感觉更有立体感一些。
完成之后漂亮的链接提示效果就出来了,还不用插件。不过在IE下就没那么漂亮了,没有圆角和阴影效果,太不给力了。原因是IE不支持css3里的圆角阴影效果,如果要IE支持css3里的圆角阴影效果就需要借助一个小插件ie-css3.htc,先去下载ie-css3.htc然后上传到自己博客的目录里在需要实现圆角阴影效果的地方引用它,如:behavior: url("http://www.love730.com/wp-content/themes/love_zz/ie-css3.htc")。这样在IE下也能正常显示css3中的圆角阴影效果了。


无觅相关文章插件

已经有5位童鞋留言了,还不来盖楼!

  1. ie圆角还有好多方法 呵呵 这个不错······· :grin:

  2. 我也是这样实现IE下圆角的。

love730.com
To:双陈记

 疑问 冷笑 悲伤 坏蛋 感叹 微笑 脸红 大笑 吃惊 惊讶 困惑 酷 大声笑 恼火 古怪

您还可以输入300个字插入图片