这个效果是不是很熟悉啊~对啦,JQDock可以轻松实现这样的效果,那么我们就来学习一下,用纯CSS的两种方式,来实现同样酷的效果。
一、先来看第一种方式(基本):
1.首先HTML列表用ul li:
- <ul id="bubble">
- <li>
- <a class="icon feed" href="http://feeds2.feedburner.com/prlamnguyen" title="Full RSS Feed">Full RSS Feed</a>
- </li>
- <li>
- <a class="icon email" href="http://feedburner.google.com/fb/a/mailverify?uri=prlamnguyen&loc=en_U" title="Feed via Emal">Feed via email</a>
- </li>
- <li>
- <a class="icon twitter" href="http://twitter.com/prlamnguyen" title="Full RSS Feed">Follow me on Twitter</a>
- </li>
- <li>
- <a class="icon facebook" href="http://facebook.com/duylamng" title="Full RSS Feed">I'm on Facebook</a>
- </li>
- <li>
- <a class="icon delicious" href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url=http://aext.net&title=AEXT.NET', 'delicious','toolbar=no,width=550,height=550'); return false;" title="Full RSS Feed">Save me</a>
- </li>
- <li>
- <a class="icon technorati" href="http://technorati.com/faves?sub=addfavbtn&add=http://aext.net" title="Full RSS Feed">Fave me</a>
- </li>
- </ul>
2.准备图片,如下图样子:
3.准备好图片后,用css定义链接的默认背景为你所用到的图片
- #bubble {
- list-style: none;
- margin: 0px;
- padding: 0px;
- }
- #bubble li {
- display: inline-block;
- margin: 0px;
- padding: 0px;
- }
- #bubble li a.icon {
- background: url(images/sprites.png) no-repeat;
- border: none;
- display: block;
- width: 128px;
- height: 128px;
- text-indent: -9999px;
- }
4.然后对每个链接样式进行定义
默认为显示小图标,当鼠标移上时让其显示大图标,这里注意的是,一定要给要显示的图片找准坐标。
- #bubble li a.feed {
- background-position: -139px -12px;
- }
- #bubble li a.feed:hover {
- background-position: -13px -12px;
- }
- #bubble li a.email {
- background-position: -139px -149px;
- }
- #bubble li a.email:hover {
- background-position: -13px -149px;
- }
- #bubble li a.twitter {
- background-position: -139px -283px;
- }
- #bubble li a.twitter:hover {
- background-position: -13px -283px;
- }
- #bubble li a.facebook {
- background-position: -139px -422px;
- }
- #bubble li a.facebook:hover {
- background-position: -13px -422px;
- }
- #bubble li a.delicious {
- background-position: -139px -559px;
- }
- #bubble li a.delicious:hover {
- background-position: -13px -559px;
- }
- #bubble li a.technorati {
- background-position: -139px -698px;
- }
- #bubble li a.technorati:hover {
- background-position: -13px -698px;
- }
OK,这样第一种方式就实现了。
二、再来看下一种方式(进阶):
1.这种方式将使用多一些的html代码,但是你将看到更少的css代码。
HTML代码如下
- <ul id="bubble2">
- <li>
- <a href="http://feeds2.feedburner.com/prlamnguyen" title="Full RSS Feed">
- <img class="small" src="images/feed.png" alt="Full RSS" />
- <img class="large" src="images/feed_large.png" alt="Full RSS" />
- </a>
- </li>
- <li>
- <a href="http://feedburner.google.com/fb/a/mailverify?uri=prlamnguyen&loc=en_U" title="Feed via Emal">
- <img class="small" src="images/email.png" alt="Feed via Emal" />
- <img class="large" src="images/email_large.png" alt="Feed via Emal" />
- </a>
- </li>
- <li>
- <a href="http://twitter.com/prlamnguyen" title="Follow me on Twitter">
- <img class="small" src="images/twitter.png" alt="Follow me on Twitter" />
- <img class="large" src="images/twitter_large.png" alt="Follow me on Twitter" />
- </a>
- </li>
- <li>
- <a href="http://facebook.com/duylamng" title="I'm on Facebook">
- <img class="small" src="images/facebook.png" alt="I'm on Facebook" />
- <img class="large" src="images/facebook_large.png" alt="I'm on Facebook" />
- </a>
- </li>
- <li>
- <a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url=http://aext.net&title=AEXT.NET', 'delicious','toolbar=no,width=550,height=550'); return false;" title="Save me">
- <img class="small" src="images/delicious.png" alt="Save me" />
- <img class="large" src="images/delicious_large.png" alt="Save me" />
- </a>
- </li>
- <li>
- <a href="http://technorati.com/faves?sub=addfavbtn&add=http://aext.net" title="Fave me on Technorati">
- <img class="small" src="images/technorati.png" alt="Fave me on Technorati" />
- <img class="large" src="images/technorati_large.png" alt="Fave me on Technorati" />
- </a>
- </li>
- </ul>
2.在这里我们要做一些变动
在鼠标悬浮在链接上时,我们大图标显示在小图标上面,第一种方式和第二种方式的区别在于,第二种方式你需要设置元素的height和width。为什么呢?原因是我们不想再鼠标移上链接时让列表移动或者大小改变,于是css代码应该像这样:
- #bubble2 {
- list-style: none;
- margin: 20px 0px 0px;
- padding: 0px;
- }
- #bubble2 li {
- display: inline-block;
- margin: 0px 5px;
- padding: 0px;
- width: 72px;
- height: 72px;
- }
72px是小图标的width,你可以设置的大一些,但是不要太大。
链接的css代码如下:
- #bubble2 li a img {
- position: relative;
- border: none;
- }
- #bubble2 li a img.large {
- display: none;
- }
- #bubble2 li a:hover img.small {
- display: none;
- z-index: 0;
- }
- #bubble2 li a:hover img.large {
- display: block;
- margin-top: -28px;
- margin-left: -28px;
- z-index: 1000;
- }
切记一定要把图片的位置关系设置为relative!因为这里我们要设置Z-index,只有位置关系式relative或者absolute时才有作用。
3.当鼠标移上小图标时,设置margin为-28px
OK~最后给IE做个设置,以便正确显示
- <!--[if IE 7]>
- <style type="text/css">
- #bubble li, #bubble2 li {
- display: inline;
- }
- </style>
- <![endif]-->
另外,本文未做IE6兼容测试,同时银月闪舞在测试demo过程中发现在IE8下方式二显示不太正常,具体原因暂时说不清楚,添加如下代码可以使显示正常:
- <!--[if IE 8]>
- <style type="text/css">
- #bubble2 li a:hover img.large {
- margin-top: -100px;
- }
- </style>
- <![endif]-->