<menu id="ocigx"><listing id="ocigx"><em id="ocigx"></em></listing></menu><em id="ocigx"><track id="ocigx"><strong id="ocigx"></strong></track></em>

<samp id="ocigx"></samp>

<mark id="ocigx"><ruby id="ocigx"><legend id="ocigx"></legend></ruby></mark><bdo id="ocigx"></bdo>

首頁 > 設計 > 實用代碼 > 正文

代碼經過精簡后的仿QQ折疊菜單-滑動門選項卡

2018-10-16 20:52:58

字體：大中小

來源：轉載

供稿：網友

代碼經過精簡后的仿QQ折疊菜單，以前發過的，不過這個是經過幾輪代碼精簡后的一個版本，而且在各瀏覽器下的表現也很不錯，兼容性沒出問題。

Source Code to Run [www.crfew.com 錯新網]

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>SlideView 滑動展示效果</title></head><body><style type="text/css">.sv3 dl, .sv3 dt, .sv3 dd{ padding:0; margin:0; }.sv3 {width:240px;border:1px solid #BFC7D9;}.sv3 dl {width:240px;height:380px;background:#EDF5FF;overflow:hidden;}.sv3 dt {padding:5px 10px;height:13px;font-size:13px;color:#000;background:#E5ECF9;border-top:1px solid #fff;border-bottom:1px solid #BFC7D9;}.sv3 dl.on dt {background:#3366CC;color:#FFF;font-weight:bold;}.sv3 dd {padding:10px;color:#333;font-size:12px;line-height:1.5em;}.sv3 dd a:link,.sv3 dd a:visited,.sv3 dd a:hover,.sv3 dd a:active { color:#333; display:block; text-align:right;}</style><div id="idSlideView3" class="sv3"><dl><dt>我的好友 </dt><dd> 張三 </dd><dd> 王五 </dd></dl><dl><dt> 業務聯系 </dt><dd> 李經理 </dd></dl><dl><dt> 家人 </dt><dd> 爸爸 </dd><dd> 媽媽 </dd></dl><dl><dt> 同事 </dt><dd> 小趙</dd></dl><dl><dt> 討厭的人 </dt><dd> 梅朝風 </dd></dl></div><script>function SlideView(e,a){for(var i=0,o=document.getElementById(e).getElementsByTagName('DL'),d;d=o[i++];)(function(e,c,m,s,t,k,h){(s=e.style).height=(h=23)+"px";e.onmouseover=function (){ t=setTimeout(e.open,200); }e.onmouseout=function (){ clearTimeout(t);}e.open=function(){if (a==e)return;c(k); a&&a.close();(a=e).className="on";k=m(function(){ if(h>379)c(k); else s.height=(h=Math.min(h+30, 380))+"px"; }, 10);}e.close = function(){c(k); e.className="";k=m(function(){ if(h<24)c(k); else s.height = (h=Math.max(h-30, 23))+"px"; }, 10);}})(d,clearInterval,setInterval);o[0].open();}new SlideView( "idSlideView3");</script></body></html>

提示:您可以修改后再運行

上一篇：返回列表

下一篇：簡潔 Tab 選項卡，CSS代碼-滑動門選項卡

學習交流

phpwind的rewrite重寫原理

phpwind的rewrite重寫原理...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

新聞熱點

為什么家庭升級要選激光電視？

2019-10-14 09:23:13

OPPO推出搭載Snapdragon730G的超強功能的新款K5

2019-10-14 08:35:41

360隨身wifi2代怎么使用？好用嗎？

2019-10-11 08:59:55

360旗下魯大師掛牌上市系中國首個硬件評測供應商

2019-10-11 08:54:28

華為Mate30 Pro系統迎更新新增超高清夜攝功能

2019-10-11 08:49:58

華為P40Pro概念圖：麒麟990+鴻蒙系統前后配7顆鏡頭

2019-10-11 08:25:39

疑難解答

圖片精選

網友關注