JS+CSS實現帶小三角指引的滑動門效果
編輯：關於JavaScript
本文實例講述了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程序設計有所幫助。
小編推薦
熱門推薦