Rumah >hujung hadapan web >tutorial js >鼠标滑过放大显示效果的列表_导航菜单网友爱唱
鼠标滑过放大显示效果的列表_导航菜单网友爱唱

PHP中文网asal: 2016-05-16 18:57:401129semak imbas
非常不错的当鼠标放上去以后，类别将会出现放大的一些文字和图片，适合一些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"> 
<!-- 
/*============ Global Style Start ============*/ 
*{margin:0;padding:0;} 
body{background-color:#FFF;color:#000;font:normal 12px "宋体", Georgia, "Times New Roman", Times, serif;} 
img{border:0;} 
a:link,a:visited{color:#000;text-decoration:none;}a:hover{color:#F65100;text-decoration:underline;} 
div,p,span,h1,h2,h3,h4,h5,h6,input,ul,li{text-align:left;} 
ul,li{list-style-type:none;} 
dt,dd{clear:both;} 
p{line-height:150%;} 
.cred,a.cred:link,a.cred:visited,a.cred:hover{color:#F00;} 
.corange,a.corange:link,a.corange:visited,a.corange:hover{color:#F65100;} 
/*clear both*/ 
.clearfix:after {content: ".";display:block;height:0;clear: both; visibility: hidden;} 
.clearfix {display: inline-block;} 
/* Hides from IE-mac \*/ 
* html .clearfix {height: 1%;} 
*+html .clearfix {height: 1%;} 
.clearfix {display: block;} 
/* End hide from IE-mac */ 
.clear{ clear: both; font-size:1px; width:1px; height:1px; visibility: hidden;} 
/*============ End Global Style ============*/ 
#sidebar{margin:0 auto;width:265px;height:auto;} 
#sidebar h2,#softinfo h2{font-size:14px;height:14px;padding:8px 0 7px 20px;border:1px solid #CDCCCA;letter-spacing:1px;overflow:hidden;background-image:url(images/title-bg.gif);} 
#sidebar h2 span,#softinfo h2 span{color:#EF2888;} 
#sidebar p{margin:0 auto;margin:10px 0 10px 0;width:233px;height:36px;color:#777575;background-color:#F7F7F7;display:block;padding:15px;border:1px solid #C5C4C1;} 
.num_one{display:none;height:54px;padding:8px 10px;border:1px solid #E5E5E5;border-width:1px 0px;background-color:#F4F4F4;clear:both} 
.num_one span{float:left;margin-right:10px;display:block;width:37px;height:48px;padding-top:4px;background:url(images/bg_num.gif) no-repeat;font-size:32px;color:#FFF;text-align:center} 
.num_one .p50{float:left;margin-right:10px;} 
.num_one ul{float:left;padding:0} 
.num_one ul li{padding-bottom:2px;white-space:nowrap} 
.num_two{cursor:pointer;height:24px;padding:2px 8px 0;clear:both} 
.num_two span{display:block;width:17px;line-height:14px;float:left;background:url(images/au_num01.gif) no-repeat 0% 50%;color:#FFF;margin:4px 6px 0 0;font-weight:bold;text-align:center} 
.num_two a{float:left;margin-top:4px !important;margin-top:6px} 
.bg{background-color:#FBFBFB;} 
.bg01{background-color:#F7F7F7;} 
#copyright{margin:0 auto;margin-top:10px;width:960px;padding:20px 0 20px 0;text-align:center;border-top:3px solid #DDD;} 
--> 
</style> 
<script language="javascript" type="text/javascript"> 
<!-- 
// 浏览器兼容的获取节点方法 
function $(objectId){ 
if(document.getElementById && document.getElementById(objectId)){ 
// W3C DOM 
return document.getElementById(objectId); 
} 
else if (document.all && document.all(objectId)){ 
// MSIE 4 DOM 
return document.all(objectId); 
} 
else if (document.layers && document.layers[objectId]){ 
// NN 4 DOM.. note: this won&#39;t find nested layers 
return document.layers[objectId]; 
} 
else{ 
return false; 
} 
} 
/* Script Form www.wangyou.com */ 
var now_show_id =0 ; 
function swap(id,bool) 
{ 
//alert(bool); 
if(id == now_show_id )return true; 
now_show_id =id ; 
for(var i=1;i<=10;i++) 
{ 
if(bool) 
{ 
if($(&#39;b&#39;+i) != null){ 
$("b"+i).style.display = bool ? &#39;none&#39; : &#39;block&#39;; 
$("s"+i).style.display = bool ? &#39;block&#39; : &#39;none&#39;; 
} 
} 
} 
$("b"+id).style.display = bool ? &#39;block&#39; : &#39;none&#39;; 
$("s"+id).style.display = bool ? &#39;none&#39; : &#39;block&#39;; 
} 
var now_id = 1; 
function swap1(id,bool) 
{ 
//alert(bool); 
if(id == now_id )return true; 
now_id =id ; 
for(var i=1;i<=10;i++) 
{ 
if(bool) 
{ 
if($(&#39;d&#39;+i) != null){ 
$("d"+i).style.display = bool ? &#39;none&#39; : &#39;block&#39;; 
$("a"+i).style.display = bool ? &#39;block&#39; : &#39;none&#39;; 
} 
} 
} 
$("d"+id).style.display = bool ? &#39;block&#39; : &#39;none&#39;; 
$("a"+id).style.display = bool ? &#39;none&#39; : &#39;block&#39;; 
} 
/* End Script */ 
//--> 
</script> 
</head> 
<body> 
<div id="sidebar"> 
<h2><span>献歌</span>鸿人榜</h2> 
<p> 
用爱唱软件录制上传歌曲即可向网友献歌！每周献歌最多者荣登鸿人榜，拿爱唱包！ 
</p> 
<div id="s1" onmouseover="swap(&#39;1&#39;,1 );" class="num_two bg01"><span>01</span><a href="/p570074.html" target=&#39;_blank&#39;>MP3格式--真...</a></div><div id="b1" onMouseOut="swap(&#39;1&#39;,0 );" class="num_one"><span>01</span><div class="p50"><a href="http://www.jb51.net" target=&#39;_blank&#39;><img src="http://www.jb51.net/images/logo.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="/p570074.html" target="_blank">MP3格式--真...  <img src="images/try.gif" width="14" height="11" alt="播放" /></a></li><li>歌手：<a href="http://www.jb51.net" target=&#39;_blank&#39;>汪宇东</a></li><li><a href="#" class="more02" onclick=&#39;top_song_vote(this,570074,-10,-40,"test");return false;&#39; style=&#39;cursor:hand;&#39;>给我投票 >></a></li></ul></div> 
<div id="s2" onmouseover="swap(&#39;2&#39;,1 );" class="num_two bg"><span>02</span><a href="/p628771.html" target=&#39;_blank&#39;>Too youn...</a></div><div id="b2" onMouseOut="swap(&#39;2&#39;,0 );" class="num_one"><span>02</span><div class="p50"><a href="http://www.jb51.net" target=&#39;_blank&#39;><img src="http://www.jb51.net/images/logo.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="/p628771.html" target="_blank">Too youn...  <img src="images/try.gif" width="14" height="11" alt="播放" /></a></li><li>歌手：<a href="http://www.jb51.net" target=&#39;_blank&#39;>OuttaSk...</a></li><li><a href="#" class="more02" onclick=&#39;top_song_vote(this,628771,-10,-40,"test");return false;&#39; style=&#39;cursor:hand;&#39;>给我投票 >></a></li></ul></div> 
<div id="s3" onmouseover="swap(&#39;3&#39;,1 );" class="num_two bg01"><span>03</span><a href="/p17186.html" target=&#39;_blank&#39;>原创→恐怖的一天</a></div><div id="b3" onMouseOut="swap(&#39;3&#39;,0 );" class="num_one"><span>03</span><div class="p50"><a href="http://www.jb51.net" target=&#39;_blank&#39;><img src="http://www.jb51.net/images/logo.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="/p17186.html" target="_blank">原创→恐怖的一天  <img src="images/try.gif" width="14" height="11" alt="播放" /></a></li><li>歌手：<a href="http://www.jb51.net" target=&#39;_blank&#39;>孙宇</a></li><li><a href="#" class="more02" onclick=&#39;top_song_vote(this,17186,-10,-40,"test");return false;&#39; style=&#39;cursor:hand;&#39;>给我投票 >></a></li></ul></div> 
<div id="s4" onmouseover="swap(&#39;4&#39;,1 );" class="num_two bg"><span>04</span><a href="/p214259.html" target=&#39;_blank&#39;>想你的日子</a></div><div id="b4" onMouseOut="swap(&#39;4&#39;,0 );" class="num_one"><span>04</span><div class="p50"><a href="http://www.jb51.net" target=&#39;_blank&#39;><img src="http://www.jb51.net/images/logo.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="/p214259.html" target="_blank">想你的日子  <img src="images/try.gif" width="14" height="11" alt="播放" /></a></li><li>歌手：<a href="http://www.jb51.net" target=&#39;_blank&#39;>鑫鑫</a></li><li><a href="#" class="more02" onclick=&#39;top_song_vote(this,214259,-10,-40,"test");return false;&#39; style=&#39;cursor:hand;&#39;>给我投票 >></a></li></ul></div> 
<div id="s5" onmouseover="swap(&#39;5&#39;,1 );" class="num_two bg01"><span>05</span><a href="/p787832.html" target=&#39;_blank&#39;>咖啡年华</a></div><div id="b5" onMouseOut="swap(&#39;5&#39;,0 );" class="num_one"><span>05</span><div class="p50"><a href="http://www.jb51.net" target=&#39;_blank&#39;><img src="http://www.jb51.net/images/logo.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="/p787832.html" target="_blank">咖啡年华  <img src="images/try.gif" width="14" height="11" alt="播放" /></a></li><li>歌手：<a href="http://www.jb51.net" target=&#39;_blank&#39;>帅帅_WU</a></li><li><a href="#" class="more02" onclick=&#39;top_song_vote(this,787832,-10,-40,"test");return false;&#39; style=&#39;cursor:hand;&#39;>给我投票 >></a></li></ul></div> 
<div id="s6" onmouseover="swap(&#39;6&#39;,1 );" class="num_two bg"><span>06</span><a href="/p595468.html" target=&#39;_blank&#39;>身别的朋友</a></div><div id="b6" onMouseOut="swap(&#39;6&#39;,0 );" class="num_one"><span>06</span><div class="p50"><a href="http://www.jb51.net" target=&#39;_blank&#39;><img src="http://www.jb51.net/images/logo.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="/p595468.html" target="_blank">身别的朋友  <img src="images/try.gif" width="14" height="11" alt="播放" /></a></li><li>歌手：<a href="http://www.jb51.net" target=&#39;_blank&#39;>随风扬</a></li><li><a href="#" class="more02" onclick=&#39;top_song_vote(this,595468,-10,-40,"test");return false;&#39; style=&#39;cursor:hand;&#39;>给我投票 >></a></li></ul></div> 
<div id="s7" onmouseover="swap(&#39;7&#39;,1 );" class="num_two bg01"><span>07</span><a href="/p605794.html" target=&#39;_blank&#39;>《放学》</a></div><div id="b7" onMouseOut="swap(&#39;7&#39;,0 );" class="num_one"><span>07</span><div class="p50"><a href="http://www.jb51.net" target=&#39;_blank&#39;><img src="http://www.jb51.net/images/logo.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="/p605794.html" target="_blank">《放学》  <img src="images/try.gif" width="14" height="11" alt="播放" /></a></li><li>歌手：<a href="http://www.jb51.net" target=&#39;_blank&#39;>衣冠&琴兽</a></li><li><a href="#" class="more02" onclick=&#39;top_song_vote(this,605794,-10,-40,"test");return false;&#39; style=&#39;cursor:hand;&#39;>给我投票 >></a></li></ul></div> 
<div id="s8" onmouseover="swap(&#39;8&#39;,1 );" class="num_two bg"><span>08</span><a href="/p609012.html" target=&#39;_blank&#39;>原创「经典情书」</a></div><div id="b8" onMouseOut="swap(&#39;8&#39;,0 );" class="num_one"><span>08</span><div class="p50"><a href="http://www.jb51.net" target=&#39;_blank&#39;><img src="http://www.jb51.net/images/logo.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="/p609012.html" target="_blank">原创「经典情书」  <img src="images/try.gif" width="14" height="11" alt="播放" /></a></li><li>歌手：<a href="http://www.jb51.net" target=&#39;_blank&#39;>布拉格のVae</a></li><li><a href="#" class="more02" onclick=&#39;top_song_vote(this,609012,-10,-40,"test");return false;&#39; style=&#39;cursor:hand;&#39;>给我投票 >></a></li></ul></div> 
<div id="s9" onmouseover="swap(&#39;9&#39;,1 );" class="num_two bg01"><span>09</span><a href="/p567174.html" target=&#39;_blank&#39;>祝愿（原创）</a></div><div id="b9" onMouseOut="swap(&#39;9&#39;,0 );" class="num_one"><span>09</span><div class="p50"><a href="http://www.jb51.net" target=&#39;_blank&#39;><img src="http://www.jb51.net/images/logo.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="/p567174.html" target="_blank">祝愿（原创）  <img src="images/try.gif" width="14" height="11" alt="播放" /></a></li><li>歌手：<a href="http://www.jb51.net" target=&#39;_blank&#39;>超人LOVE</a></li><li><a href="#" class="more02" onclick=&#39;top_song_vote(this,567174,-10,-40,"test");return false;&#39; style=&#39;cursor:hand;&#39;>给我投票 >></a></li></ul></div> 
<div id="s10" onmouseover="swap(&#39;10&#39;,1 );" class="num_two bg"><span>10</span><a href="/p639976.html" target=&#39;_blank&#39;>《走音格格》</a></div><div id="b10" onMouseOut="swap(&#39;10&#39;,0 );" class="num_one"><span>10</span><div class="p50"><a href="http://www.jb51.net" target=&#39;_blank&#39;><img src="http://www.jb51.net/images/logo.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="/p639976.html" target="_blank">《走音格格》  <img src="images/try.gif" width="14" height="11" alt="播放" /></a></li><li>歌手：<a href="http://www.jb51.net" target=&#39;_blank&#39;>☆Gina★</a></li><li><a href="#" class="more02" onclick=&#39;top_song_vote(this,639976,-10,-40,"test");return false;&#39; style=&#39;cursor:hand;&#39;>给我投票 >></a></li></ul></div> 
</div> 
</body> 
</html>
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：用tip解决Ext列宽度不够的问题_YUI.Ext相关Artikel seterusnya：JavaScript 拖放效果代码_javascript技巧
Artikel berkaitan

Lihat lagi
鼠标滑过 放大显示效果的列表_导航菜单网友爱唱

Artikel berkaitan

鼠标滑过放大显示效果的列表_导航菜单网友爱唱
