suchen

Heim  >  Artikel  >  Web-Frontend  >  鼠标滑过 放大显示效果的列表_导航菜单网友爱唱

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

PHP中文网
PHP中文网Original
2016-05-16 18:57:401125Durchsuche

非常不错的当鼠标放上去以后，类别将会出现放大的一些文字和图片，适合一些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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：用tip解决Ext列宽度不够的问题_YUI.Ext相关Nächster Artikel：JavaScript 拖放效果代码_javascript技巧

In Verbindung stehende Artikel

Mehr sehen