简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  Move the mouse over to enlarge the list of display effects_Navigation menu Netizens love to sing

Move the mouse over to enlarge the list of display effects_Navigation menu Netizens love to sing

PHP中文网
PHP中文网Original
2016-05-16 18:57:401102browse

It’s very good that when the mouse is placed on it, some enlarged text and pictures will appear in the category, suitable for some tips message box effects

Rendering
Move the mouse over to enlarge the list of display effects_Navigation menu Netizens love to sing

<!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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Use tips to solve the problem of insufficient Ext column width_YUI.Ext relatedNext article：Use tips to solve the problem of insufficient Ext column width_YUI.Ext related

Related articles

See more