Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Hauptteil

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

PHP中文网
Freigeben： 2016-05-16 18:57:40
Original
1121 Leute haben es durchsucht

非常不错的当鼠标放上去以后，类别将会出现放大的一些文字和图片，适合一些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>
Nach dem Login kopieren
Verwandte Etiketten：
列表 鼠标滑过
Quelle：php.cn
Vorheriger Artikel：用tip解决Ext列宽度不够的问题_YUI.Ext相关 Nächster Artikel：JavaScript 拖放效果代码_javascript技巧
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Reine CSS-Methode zum dynamischen Ändern der Bildquelle beim Klicken ohne Verwendung von JavaScript Ich muss den Quellcode eines Bildes per Mausklick ändern, indem ich nur CSS wie img:active...
Aus 2024-04-06 19:25:49
0
1
505
Generieren Sie Standardwerte und CSS-Variablen mit SCSS Ich setze Website-Styling um. Aus Gründen der Legacy-Unterstützung muss ich IE11 zumindest...
Aus 2024-04-06 17:46:54
0
1
355
CSS-Stile werden nicht auf die Website angewendet Ich erstelle eine Website mit Bootstrap5, aber die index.css-Eigenschaften werden nicht au...
Aus 2024-04-06 17:12:23
0
1
336
Warum unterbricht das Weglassen von 0 ms Schlaf meine CSS-Übergänge? Ich versuche, eine FLIP-Animation zu implementieren, um zu sehen, ob ich sie richtig verst...
Aus 2024-04-06 16:29:50
0
2
490
Die Polsterung des Elternteils wird vom klebrig positionierten Kind ignoriert Wie kann verhindert werden, dass klebrige Elemente hinter den Header gelangen? Das aktuell...
Aus 2024-04-06 11:42:51
0
1
338
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage