JS CSS는 작은 삼각형 안내_javascript 기술로 슬라이딩 도어 효과를 구현합니다.-JS 튜토리얼-php.cn

JS CSS는 작은 삼각형 안내_javascript 기술로 슬라이딩 도어 효과를 구현합니다.

WBOY

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

원래의

1238명이 탐색했습니다.

이 기사의 예에서는 작은 삼각형 안내를 사용하여 슬라이딩 도어 효과의 JS CSS 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

작은 삼각형 가이드가 있는 JS CSS 슬라이딩 도어입니다. 일부 친구들은 IE6에서는 효과를 볼 수 없다고 말했습니다. 실제로 작은 삼각형의 색상이 상대적으로 연하기 때문에 볼 수 있습니다. 모니터 때문에 보기 힘든데, 사실 이 색상을 조절하기만 하면 되는데, 삼각형 가이드를 사용하면 전체 슬라이딩 도어의 구조가 더 명확해지고 가이드도 더 합리적이 됩니다.

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

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

http://demo.jb51.net/js/2015/js-css-sj-move-menu-style-codes/

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

<!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=utf-8" />
<title>滑动门</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px;}
body{
 padding:30px;
}
.tabsBox{ width:400px; margin:20px auto;}
.tabs{ height:20px;}
.tabs li{ width:80px; text-align:center; padding-top:2px; line-height:18px; float:left; background-color:#ccc; margin-right:5px; list-style:none; position:relative; cursor:pointer; color:#333;}
.tabs li span{ display:none;}
.tabs .cur{ background-color:#f0f0f0;}
.tabs .cur span{ display:block; width:1px; height:1px; border:solid 8px; border-color:#f0f0f0 #fff #fff #fff; position:absolute; top:20px; left:32px; overflow:hidden; z-index:-1;}
.cons{ height:120px; padding:8px 12px; overflow:hidden; border:1px solid #f0f0f0; position:relative; z-index:1;}
.cons ul li{ list-style:none; line-height:20px;}
.hidden{ display:none;}
.block{ display:block;}
</style>
</head>
<body>
<div class="tabsBox">
 <ul id="Tabs" class="tabs">
  <li class="cur">最新更新<span></span></li>
  <li>推荐下载<span></span></li>
  <li>下载排行<span></span></li>
  <li>本月排行<span></span></li>
 </ul>
 <div id="TabsCon" class="cons">
  <ul>
  <li><a href="#" target="_blank">基于JavaScript的气泡提示网页版</a></li><li><a href="#" target="_blank">C#调用OFFICE组件生成Excel表格示例</a></li><li><a href="#" target="_blank">iFrame 框架在多页面间相互传值的实例</a></li><li><a href="#" target="_blank">高亮显示代码的在线编辑器ASP.NET版</a></li><li><a href="#" target="_blank">《Java2核心技术卷2:高级特性》第7版中文高清 PDF</a></li><li><a href="#" target="_blank">VB餐厅POS收银软件</a></li></ul>
 <ul>
 <li><a href="#" target="_blank">VB餐厅POS收银软件</a></li><li><a href="#" target="_blank">VB 6.0 简体中文标准版</a></li><li><a href="#" target="_blank">Delphi加密隐藏或还原Windows盘符驱动器</a></li><li><a href="#" target="_blank">ImageVue 2.0 PHP+FLASH+XML高级相册</a></li><li><a href="#" target="_blank">VB商品零售进销存程序含MSSQL数据库文件</a></li>
 </ul>
 <ul>
 <li><a href="#" target="_blank">jQuery 模块拖动，拖动层效果，可淡入淡出</a></li><li><a href="#" target="_blank">jQuery单行新闻滚动</a></li><li><a href="#" target="_blank">经典的jQuery多行文本滚动</a></li><li><a href="#" target="_blank">JS图片切换学习版，没有过多修饰</a></li><li><a href="#" target="_blank">漂浮广告代码，Js演示</a></li><li><a href="#" target="_blank">边滚边停的JS图片滚动</a></li></ul>
 <ul>
 <li><a href="#" target="_blank">递归读取数据库创建树控菜单的Delphi例子</a></li><li><a href="#" target="_blank">VB抓取DLL或EXE应用程序内的图标资源</a></li><li><a href="#" target="_blank">jQuery StartStopSlider 滚动切换插件</a></li><li><a href="#" target="_blank">jQuery EasyUI 实例演示（菜单、TAB等）</a></li><li><a href="#" target="_blank">VB+SQL2000考试卷（题库）生成与管理系统</a></li>
 </ul>
 </div>
</div>
<script type="text/javascript">
 var lis = document.getElementById("Tabs").getElementsByTagName("li");
 var uls = document.getElementById("TabsCon").getElementsByTagName("ul");
 var order = 0;
 for(var i=0; i<lis.length; i++){
  lis[i].value = i;
  lis[i].onmouseover = function(){
   ChangeTabs(this.value); 
  };
  uls[i].className = "hidden";
 }
 lis[order].className = "cur";
 uls[order].className = "block";
 function ChangeTabs(nowTab){
  lis[order].className = "";
  uls[order].className = "hidden";
  order = nowTab
  lis[nowTab].className = "cur";
  uls[nowTab].className = "block";
 }
</script>
</body>
</html>

로그인 후 복사

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