JS는 매우 간단한 QQ와 같은 접이식 메뉴 effect_javascript 기술을 구현합니다.-JS 튜토리얼-php.cn

JS는 매우 간단한 QQ와 같은 접이식 메뉴 effect_javascript 기술을 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:38:35

원래의

1503명이 탐색했습니다.

이 기사의 예에서는 JS를 사용하여 매우 간단한 QQ와 같은 접기 메뉴 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

이전에 올렸던 단순화된 QQ식 접이식 메뉴 코드인데, 여러번의 코드 합리화를 거친 버전이고, 다양한 브라우저에서도 성능은 매우 좋은데 호환성이 좋지 않습니다. 뭔가 문제가 생겼습니다. .

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/js-simple-f-qq-zd-style-menu-codes/

구체적인 코드는 다음과 같습니다.

<!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>

로그인 후 복사

이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이 되기를 바랍니다.