WORKS作品
-
超链接按类型加样式效果代码
2008-06-22版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://shipin.blogbus.com/logs/23368491.html
最近在pooliestudios.com上看到一篇标题为“Iconize Textlinks with CSS”介绍通过css来使连接加上指定图标的文章，很不错，因为它使超连接更直观化，比如我的日志中经常有下载的rar压缩文件连接和flash文件连接，我就可以通过CSS对它们分别定义一个图标，又或者我想对某些连接在新窗口中打开，我就可以对它定义另一个图标。
但是这篇文章讲到的方法在IE6.0上不能发挥作用，虽然IE6.0官方经限制它的存活了，但是在中国，仍然还是有相当多的人在使用它，对此我们可以使用jquery来弥补这个缺陷。
这就是今天要讲到的超链接按类型加样式效果代码。超链接按类型加样式效果代码基于jquery技术，兼容各大浏览器。它将使日志中的超连接按后缀类型或者指定的字符来定义不同的样式效果，从而大大降低我们的工作量。
先来看一下范例：超链接按类型加样式效果代码你会发现不同的连接后面或者前面都出现了一个小图标，这个图标可以自己定义，它的原理就是根据你的超连接中包含的字符来指定图标样式。一起来分析下代码：
1.header中的代码：<script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script>
<script type="text/javascript">
$(document).ready(function(){
//以下表示当指定的连接中包含指定的后缀名时增加相应的样式
$("a[@href$=flv],a[@href$=mp4],a[@href$=mov],a[@href$=wmv],a[@href$=avi],a[@href$=mpg]").addClass("flv");
$("a[@href$=zip],a[@href$=rar],a[@href$=gzip],a[@href$=bzip],a[@href$=ace]").addClass("zip");
$("a[@href$=txt]").addClass("txt");
$("a[@href$=jpg],a[@href$=gif],a[@href$=bmp],a[@href$=png]").addClass("pic");
$("a[@href$=mp3],a[@href$=wav],a[@href$=ogg],a[@href$=wma],a[@href$=m4a]").addClass("mp3");
$("a[@href$=fla],a[@href$=swf]").addClass("fla");
//以下表示当指定的连接中包含指定的前缀时增加相应的样式
$("a[@href^=mailto]").addClass("mailto");
$("a[@href^=skype]").addClass("skype");
$("a[@href^=msnim]").addClass("msnim");
$("a[@href^=qqim]").addClass("qq");
//以下表示当指定的连接中包含指定的内容时增加相应的样式
$("a[@href*=/logs/]").addClass("new").attr({ target: "_blank" });
//综合应用
$("a[@href$=blogbus.com]").not("[@href^=http://www]").addClass("add").attr({ target: "_blank" });
});
</script>2.css中的代码：
a:link,a:visited{text-decoration: none; color: #ab1; line-height: 20px; margin: 0 3px;}
a:hover{color: #fa5eb6;}
a.flv {
background: url(http://shipin.blogbus.com/files/12015443680.gif) no-repeat center right;
padding-right: 18px;
}
a.zip {
background: url(http://shipin.blogbus.com/files/12015441389.gif) no-repeat center right;
padding-right: 18px;
}
a.pic {
background: url(http://shipin.blogbus.com/files/12138246070.gif) no-repeat center right;
padding-right: 18px;
}
a.mailto {
background: url(http://shipin.blogbus.com/files/12015441386.gif) no-repeat center left;
padding-left: 18px;
}
a.skype {
background: url(http://shipin.blogbus.com/files/12015441388.gif) no-repeat center left;
padding-left: 18px;
}
a.txt {
background: url(http://shipin.blogbus.com/files/12015441384.gif) no-repeat center right;
padding-right: 18px;
}
a.mp3 {
background: url(http://shipin.blogbus.com/files/12015441383.gif) no-repeat center right;
padding-right: 18px;
}
a.msnim {
background: url(http://shipin.blogbus.com/files/12015441382.gif) no-repeat center left;
padding-left: 18px;
}
a.fla {
background: url(http://shipin.blogbus.com/files/12015441381.gif) no-repeat center right;
padding-right: 18px;
}
a.new {
background: url(http://shipin.blogbus.com/files/12015442861.gif) no-repeat center right;
padding-right: 18px;
}
a.add {
background: url(http://shipin.blogbus.com/files/12015476021.png) no-repeat center right;
padding: 5px 18px 5px 0;
}3.index中的连接示范代码：
<p>01. <a href="http://eg.flv">.flv</a> - <a href="http://eg.mp4">.mp4</a> - <a href="http://eg.mov">.mov</a> - <a href="http://eg.wmv">.wmv</a> - <a href="http://eg.avi">.avi</a> - <a href="http://eg.mpg">.mpg</a> (注：视频文件)</p>
<p>02. <a href="http://eg.zip">.zip</a> - <a href="http://eg.rar">.rar</a> - <a href="http://eg.gzip">.gzip</a> - <a href="http://eg.bzip">.bzip</a> - <a href="http://eg.ace">.ace</a> (注：压缩包文件)</p>
<p>03. <a href="http://eg.txt">.txt</a> (注：文本文件)</p>
<p>06. <a href="http://eg.jpg">.jpg</a> - <a href="http://eg.gif">.gif</a> - <a href="http://eg.bmp">.bmp</a> - <a href="http://eg.png">.png</a> (注：图片文件)</p>
<p>07. <a href="http://eg.mp3">.mp3</a> - <a href="http://eg.wav">.wav</a> - <a href="http://eg.ogg">.ogg</a> - <a href="http://eg.wma">.wma</a> - <a href="http://eg.m4a">.m4a</a> (注：音乐文件)</p>
<p>08. <a href="http://eg.fla">.fla</a> - <a href="http://eg.swf">.swf</a> (注：动画文件)</p>
<p>09. <a href="mailto:maipD">mailto:</a> (注：发送邮件)</p>
<p>10. <a href="skype:userID">skype:</a> (注：skype聊天)</p>
<p>11. <a href="msnim:userID">msn:</a> (注：msn聊天)</p> <p>01. 昨天在<a href="http://shipin.blogbus.com">shipin</a>的空间看到一篇关于音乐播放器的日志：<a href="http://shipin.blogbus.com/logs/22893651.html">很简单歌曲自定义音乐播放器</a>（注：新窗口打开）。<br />很不错，flash文件地址是：<a href="http://shipin.blogbus.com/files/12136303670.swf">http://shipin.blogbus.com/files/12136303670.swf</a>,<br />你也可以直接下载这个文件包：<a href="http://cid-70d689770ac0b1d0.skydrive.pve.com/self.aspx/Pubpc/%e5%be%88%e7%ae%80%e5%8d%95%e6%ad%8c%e6%9b%b2%e8%87%aa%e5%ae%9a%e4%b9%89%e9%9f%b3%e4%b9%90%e6%92%ad%e6%94%be%e5%99%a8.rar">很简单歌曲自定义音乐播放器.rar</a>里面有详细使用说明</p>
<p>02. <a href="http://www.blogbus.com">博客大巴</a>(注：没有图标)真不错，我现在就<a href='http://www.blogbus.com/user/reg.php' target='_blank'>注册</a></p>其实上面的代码观察一下就不难发现：
首先通过js调用href中包含的值，a[@href$=flv]表示当a中的href值包含以flv为后缀的字符就执行addClass("flv");即增加样式.flv；
同样的a[@href^=mailto]表示当a中的href值包含以mailto为前缀的字符就执行addClass("mailto");即增加样式.mailto；
$("a[@href*=/logs/]表示当a中的href值包含/logs/字符就执行addClass("new").attr({ target: "_blank" });即增加样式.new并使该连接在新窗口中打开；
$("a[@href$=blogbus.com]").not("[@href^=http://www]").addClass("add").attr({ target: "_blank" });表示连接中包含以blogbus.com为后缀但是不能包含以http://www为前缀的字符就执行样式.add的命令参数。这个脚本设置可用来友情连接大巴上的用户。关于图标你可以在css中把我提供的连接替换成你自己想要的图标，至于放在连接文字的前边还是后边随自己的喜好，只要更改padding的值就可以了。
顺便提供下载pooliestudios.com的图标压缩包：link_type_icons.rar，有需要的朋友就拿去吧。
随机文章：
规定时间内显示*隐藏浮动层效果代码 2008-06-29鼠标点击(click)选项卡(TAB)效果代码 2008-06-15鼠标滑过(hover)选项卡(TAB)效果代码 2008-06-15发布日期纵向效果代码 2008-05-08评论双样式效果代码 2008-05-03
收藏到：Del.icio.us
引用:
评论
效果参见这个帖子：http://fayaa.blogbus.com/logs/23891688.html
字体、背景色、配色主题都是可选的，支持近百种编程语言。