教程集 > 脚本编程 > javascript > 正文模仿QQ菜单

模仿QQ菜单

发布时间：2023-04-29 编辑：jiaochengji.com

教程集为您提供模仿QQ菜单等资源，欢迎您收藏本站，我们将为您提供最新的模仿QQ菜单资源

提示：您可以先修改部分代码再运行

<!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>  *{  	margin:0;  	padding:0;  }  #QQ2008	{  	width:220px;  	margin:0 auto;  	margin-top:50px;  	border:1px solid #B3D7F1;	  	}  #QQ2008 dl {  	margin-top:4px;  	}  #QQ2008 .b {  	height:24px;  	background-color:#FFFFFF;  	border:1px solid #FFFFFF;  	}  #QQ2008 .b .pic {  	float:left;  	height:24px;  	text-align:center;  	}  #QQ2008 .b .pic img {  	width:20px;  	height:20px;  	float:left;  	margin:2px;  	}	  #QQ2008 .b .name {  	line-height:30px;  	font-size:12px;  	margin-left:6px;  	color:#333333;  	float:left;  	}  #QQ2008 .b .text {  	font-size:12px;  	line-height:30px;  	color:#666666;  	text-overflow : ellipsis;  	overflow:hidden;  	white-space: nowrap;	  	}	  #QQ2008 .b .other {  	display:none;  	}  #QQ2008 .show {  	height:50px;  	background-color:#DDF4FF;  	border:1px solid #B3D7F1;  	}	  #QQ2008 .show .name {  	font-size:12px;  	line-height:16px;  	color:#ff6600;  	}  #QQ2008 .show .pic {  	float:left;  	}  #QQ2008 .show .pic img {  	float:left;  	width:40px;  	height:40px;  	margin:5px;  	margin-left:2px;  	}   #QQ2008 .show .text {  	font-size:12px;  	line-height:14px;  	color:#666;  	text-overflow : ellipsis;  	overflow:hidden;  	white-space: nowrap;	  	}  </style>  <script>  var show_i=1;  function show(a,b) {  	if (show_i==b)	{a.className=(a.className=="show")?"b":"show"; return true;}  	var ohidden=document.getElementById("list_item" show_i);  	ohidden.className="b";  	ohidden.style.border="1px solid #FFFFFF";  	ohidden.style.backgroundColor="#fff";  	a.className=(a.className=="show")?"b":"show";  	show_i=b;    }  function over(d) {  	var now_show=document.getElementById("list_item" d);  	if (now_show.className=="show") return true;  	now_show.style.border="1px solid #DDF4FF";  	now_show.style.backgroundColor="#E8F9FF";  	}    function out(e) {  	var now_show=document.getElementById("list_item" e);  	if (now_show.className=="show") return true;  	now_show.style.border="1px solid #FFFFFF";  	now_show.style.backgroundColor="#fff";  	}  </script>  </head>    <body>      <div id="QQ2008" >  	<dl id="list_item1" class="b" style="margin-top:0;"  onclick="show(this,1)" onmousemove="over(1)" onmouseout="out(1)" >  		<dt class="pic"><img src="" width="20" height="20" /></dt>  		<dd class="name">Koma</dd>  		<dd class="text">(今天天气真好！)</dd>  		<dd class="other"><img src="" /></dd>  	</dl>    	<dl id="list_item2" class="b"  onclick="show(this,2)" onmousemove="over(2)" onmouseout="out(2)"  >  		<dt class="pic"><img src="" width="20" height="20" /></dt>  		<dd class="name">Anna</dd>  		<dd class="text">(过完年上班，新的开始！！)</dd>  		<dd class="other"><img src="" /></dd>  	</dl>    	<dl id="list_item3" class="b"  onclick="show(this,3)" onmousemove="over(3)"  onmouseout="out(3)" >  		<dt class="pic"><img src="" width="20" height="20"  /></dt>  		<dd class="name">风的样子</dd>  		<dd class="text">(头痛)</dd>  		<dd class="other"></dd>  	</dl>  		<dl id="list_item4" class="b" onclick="show(this,4)" onmousemove="over(4)" onmouseout="out(4)"  >  		<dt class="pic"><img src=""  width="20" height="20"  /></dt>  		<dd class="name">小鱼儿</dd>  		<dd class="text">(山重水复疑无路，柳暗花明又一村。)</dd>  		<dd class="other"><img src="" /><img src="" /></dd>  	</dl>    	<dl id="list_item5" class="b"  onclick="show(this,5)"  onmousemove="over(5)" onmouseout="out(5)" >  		<dt class="pic"><img src=""  width="20" height="20"  /></dt>  		<dd class="name">nick</dd>  		<dd class="text">(再牛b的肖邦，也弹不出老子的悲伤)</dd>  		<dd class="other"><img src="" /></dd>  	</dl>  </div>  </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
qq浏览器兼容模式切换方法图解
 js 仿QQ下拉菜单
 CSS Dock Menu
QQ浏览器设置默认下载工具的方法
 导航菜单-仿腾讯QQ三级下拉菜单
 qq语音有回音怎么办?有回音解决方法
 jquery 仿QQ校友的DIV模拟窗口效果源码
 QQ浏览器鼠标手势功能在哪里？怎么设置?
QQ无法视频怎么办？QQ不能视频解决方法？
QQ 电脑浏览器书签不见了找回方法

上一篇：向上滚动的图片带链接下一篇：js判断数组元素是否有重复

[关闭]

模仿QQ菜单

最近更新

浏览排行