鼠标滑过放大显示效果的列表

更新时间：2008年12月13日 00:09:50 作者：

非常不错的当鼠标放上去以后，类别将会出现放大的一些文字和图片，适合一些tips消息框效果

效果图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>网友爱唱</title> <style type="text/css">  </style> <script language="javascript" type="text/javascript">  </script> </head> <body> <div id="sidebar"> <h2><span>献歌</span>鸿人榜</h2> <p> 用爱唱软件录制上传歌曲即可向网友献歌！每周献歌最多者荣登鸿人榜，拿爱唱包！ </p> <div id="s1" onmouseover="swap('1',1 );" class="num_two bg01"><span>01</span><a href="/p570074.html" target='_blank'>MP3格式--真...</a></div><div id="b1" onMouseOut="swap('1',0 );" class="num_one"><span>01</span><div class="p50"><a href="https://www.jb51.net" target='_blank'><img src="https://www.jb51.net/images/logo.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="/p570074.html" target="_blank">MP3格式--真...&nbsp;&nbsp;<img src="images/try.gif" width="14" height="11" alt="播放" /></a></li><li>歌手：<a href="https://www.jb51.net" target='_blank'>汪宇东</a></li><li><a href="#" class="more02" onclick='top_song_vote(this,570074,-10,-40,"test");return false;' style='cursor:hand;'>给我投票&nbsp;&gt;&gt;</a></li></ul></div> <div id="s2" onmouseover="swap('2',1 );" class="num_two bg"><span>02</span><a href="/p628771.html" target='_blank'>Too youn...</a></div><div id="b2" onMouseOut="swap('2',0 );" class="num_one"><span>02</span><div class="p50"><a href="https://www.jb51.net" target='_blank'><img src="https://www.jb51.net/images/logo.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="/p628771.html" target="_blank">Too youn...&nbsp;&nbsp;<img src="images/try.gif" width="14" height="11" alt="播放" /></a></li><li>歌手：<a href="https://www.jb51.net" target='_blank'>OuttaSk...</a></li><li><a href="#" class="more02" onclick='top_song_vote(this,628771,-10,-40,"test");return false;' style='cursor:hand;'>给我投票&nbsp;&gt;&gt;</a></li></ul></div> <div id="s3" onmouseover="swap('3',1 );" class="num_two bg01"><span>03</span><a href="/p17186.html" target='_blank'>原创→恐怖的一天</a></div><div id="b3" onMouseOut="swap('3',0 );" class="num_one"><span>03</span><div class="p50"><a href="https://www.jb51.net" target='_blank'><img src="https://www.jb51.net/images/logo.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="/p17186.html" target="_blank">原创→恐怖的一天&nbsp;&nbsp;<img src="images/try.gif" width="14" height="11" alt="播放" /></a></li><li>歌手：<a href="https://www.jb51.net" target='_blank'>孙宇</a></li><li><a href="#" class="more02" onclick='top_song_vote(this,17186,-10,-40,"test");return false;' style='cursor:hand;'>给我投票&nbsp;&gt;&gt;</a></li></ul></div> <div id="s4" onmouseover="swap('4',1 );" class="num_two bg"><span>04</span><a href="/p214259.html" target='_blank'>想你的日子</a></div><div id="b4" onMouseOut="swap('4',0 );" class="num_one"><span>04</span><div class="p50"><a href="https://www.jb51.net" target='_blank'><img src="https://www.jb51.net/images/logo.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="/p214259.html" target="_blank">想你的日子&nbsp;&nbsp;<img src="images/try.gif" width="14" height="11" alt="播放" /></a></li><li>歌手：<a href="https://www.jb51.net" target='_blank'>鑫鑫</a></li><li><a href="#" class="more02" onclick='top_song_vote(this,214259,-10,-40,"test");return false;' style='cursor:hand;'>给我投票&nbsp;&gt;&gt;</a></li></ul></div> <div id="s5" onmouseover="swap('5',1 );" class="num_two bg01"><span>05</span><a href="/p787832.html" target='_blank'>咖啡年华</a></div><div id="b5" onMouseOut="swap('5',0 );" class="num_one"><span>05</span><div class="p50"><a href="https://www.jb51.net" target='_blank'><img src="https://www.jb51.net/images/logo.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="/p787832.html" target="_blank">咖啡年华&nbsp;&nbsp;<img src="images/try.gif" width="14" height="11" alt="播放" /></a></li><li>歌手：<a href="https://www.jb51.net" target='_blank'>帅帅_WU</a></li><li><a href="#" class="more02" onclick='top_song_vote(this,787832,-10,-40,"test");return false;' style='cursor:hand;'>给我投票&nbsp;&gt;&gt;</a></li></ul></div> <div id="s6" onmouseover="swap('6',1 );" class="num_two bg"><span>06</span><a href="/p595468.html" target='_blank'>身别的朋友</a></div><div id="b6" onMouseOut="swap('6',0 );" class="num_one"><span>06</span><div class="p50"><a href="https://www.jb51.net" target='_blank'><img src="https://www.jb51.net/images/logo.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="/p595468.html" target="_blank">身别的朋友&nbsp;&nbsp;<img src="images/try.gif" width="14" height="11" alt="播放" /></a></li><li>歌手：<a href="https://www.jb51.net" target='_blank'>随风扬</a></li><li><a href="#" class="more02" onclick='top_song_vote(this,595468,-10,-40,"test");return false;' style='cursor:hand;'>给我投票&nbsp;&gt;&gt;</a></li></ul></div> <div id="s7" onmouseover="swap('7',1 );" class="num_two bg01"><span>07</span><a href="/p605794.html" target='_blank'>《放学》</a></div><div id="b7" onMouseOut="swap('7',0 );" class="num_one"><span>07</span><div class="p50"><a href="https://www.jb51.net" target='_blank'><img src="https://www.jb51.net/images/logo.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="/p605794.html" target="_blank">《放学》&nbsp;&nbsp;<img src="images/try.gif" width="14" height="11" alt="播放" /></a></li><li>歌手：<a href="https://www.jb51.net" target='_blank'>衣冠&琴兽</a></li><li><a href="#" class="more02" onclick='top_song_vote(this,605794,-10,-40,"test");return false;' style='cursor:hand;'>给我投票&nbsp;&gt;&gt;</a></li></ul></div> <div id="s8" onmouseover="swap('8',1 );" class="num_two bg"><span>08</span><a href="/p609012.html" target='_blank'>原创「经典情书」</a></div><div id="b8" onMouseOut="swap('8',0 );" class="num_one"><span>08</span><div class="p50"><a href="https://www.jb51.net" target='_blank'><img src="https://www.jb51.net/images/logo.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="/p609012.html" target="_blank">原创「经典情书」&nbsp;&nbsp;<img src="images/try.gif" width="14" height="11" alt="播放" /></a></li><li>歌手：<a href="https://www.jb51.net" target='_blank'>布拉格のVae</a></li><li><a href="#" class="more02" onclick='top_song_vote(this,609012,-10,-40,"test");return false;' style='cursor:hand;'>给我投票&nbsp;&gt;&gt;</a></li></ul></div> <div id="s9" onmouseover="swap('9',1 );" class="num_two bg01"><span>09</span><a href="/p567174.html" target='_blank'>祝愿（原创）</a></div><div id="b9" onMouseOut="swap('9',0 );" class="num_one"><span>09</span><div class="p50"><a href="https://www.jb51.net" target='_blank'><img src="https://www.jb51.net/images/logo.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="/p567174.html" target="_blank">祝愿（原创）&nbsp;&nbsp;<img src="images/try.gif" width="14" height="11" alt="播放" /></a></li><li>歌手：<a href="https://www.jb51.net" target='_blank'>超人LOVE</a></li><li><a href="#" class="more02" onclick='top_song_vote(this,567174,-10,-40,"test");return false;' style='cursor:hand;'>给我投票&nbsp;&gt;&gt;</a></li></ul></div> <div id="s10" onmouseover="swap('10',1 );" class="num_two bg"><span>10</span><a href="/p639976.html" target='_blank'>《走音格格》</a></div><div id="b10" onMouseOut="swap('10',0 );" class="num_one"><span>10</span><div class="p50"><a href="https://www.jb51.net" target='_blank'><img src="https://www.jb51.net/images/logo.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="/p639976.html" target="_blank">《走音格格》&nbsp;&nbsp;<img src="images/try.gif" width="14" height="11" alt="播放" /></a></li><li>歌手：<a href="https://www.jb51.net" target='_blank'>☆Gina★</a></li><li><a href="#" class="more02" onclick='top_song_vote(this,639976,-10,-40,"test");return false;' style='cursor:hand;'>给我投票&nbsp;&gt;&gt;</a></li></ul></div> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

CSS导航菜单，三级菜单实现代码
CSS导航菜单，三级菜单，资源完整，超实用，希望大家喜欢。
2010-11-11
点击后慢慢弹出下拉菜单效果代码(栏目管理常用)
点击后慢慢弹出下拉菜单，sky整理收集。
2010-07-07
javascript实现操作cookie实现的可记忆菜单
javascript实现操作cookie实现的可记忆菜单...
2007-07-07
纯CSS实现的竖向导航菜单
纯CSS实战竖向导航菜单，这也算是一个典型的CSS菜单啦，这里要用到两个背景图片，在鼠标动作时分别加载不同的背景图片，以达到反差给人的清新效果，其实这种菜单的制作是很简单的，代码量不大，作为初级者的教程还是很不错的。
2010-03-03
Div+Js实现的带阴影菜单微软以前网站曾用过
Div+Js实现的阴影菜单，微软以前老版网站首页曾用过，用以索引出Windows产品家族的所有产品，本菜单仅实现了一个雏形，想实现像微软一样的效果，估计还需要做不少工作。放出来的目的是供学习CSS的朋友做参考。
2009-12-12
简单通用的JS滑动门代码
网上的太复杂，这样的代码比较简单
2008-12-12
基于jquery的淡入淡出选项卡效果代码
经典的Tab选项卡代码,淡入淡出,jquery插件版,希望大家能够喜欢,简洁未过多美化.
2010-06-06
通用的二级菜单代码(css+javascript)
前几天做网站使用到二级菜单，想也没想就在网上当了几个，不过大多都不太满意，只有《CSS二级菜单》看上去似乎好一点，就使用了那个。
2009-07-07
jquery 导航设计实现代码学习jquery的朋友可以看下
jquery 导航设计，主要是通过jquery控制一些css样式变换。
2009-09-09
msn上的tab功能Firefox对childNodes处理的一个BUG
今天公司用到一个tab功能发现 msn上的不错，但是在firefox兼容不好，msn他们的方法就是用了不少的div包含，不过网上有高人解决了。
2008-01-01