游戏TAB滚动效果
WEB入門實踐視頻課：https://edu.csdn.net/course/detail/8502
第一步：設計頁面
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>Tab效果</title><link href="../css/tab.css" rel="stylesheet" type="text/css" /><script src="../js/tab.js"></script></head><body><!--設計外部的布局效果--><div id="outer"><ul><li id="tab1" onmouseover="show(1)">佳片有約</li><li id="tab2" onmouseover="show(2)">電視連載</li><li id="tab3" onmouseover="show(3)">戲曲頻道</li><li id="tab4" onmouseover="show(4)">國際時事</li><li id="tab4" onmouseover="show(5)">少兒動畫</li></ul><div id="content"><div id="ct1"><img src="images/bg1.jpg"/></div><div id="ct2"><img src="images/bg2.jpg"/></div><div id="ct3"><img src="images/bg3.jpg"/></div><div id="ct4"><img src="images/bg4.jpg"/></div><div id="ct5"><img src="images/bg5.jpg"/></div></div></div></body> </html>第二步：CSS樣式設計：
ul{list-style: none;width:385px;height: 16px; } #tab1,#tab2,#tab3,#tab4{width:76px;height: 30px;float:left;margin-right: -1px;text-align: center;line-height: 30px;font-weight: bold;font-size: 13px;border: 1px solid blue; } #content{margin-left: 20px; } img{width:385px;height: 385px;;}第三步：JS動態設計，控制CSS和HTML元素
//定義變量，幫助實現自動輪換; var index=1; function $(id){return document.getElementById(id);} function show(id){//獲得事件的主要對象;var tab=$('tab'+id);var ct=$('ct'+id);//改變tab元素的樣式； 顯示選中的tab內容;for(var i=1;i<=5;i++){if(i!=id){$('ct'+i).style.display='none';}}ct.style.display='block';index=id; } //圖片自動輪換的方法; function autoTab(){if(index==6)index=1; //到頭了，從新開始;show(index);index++;setTimeout('autoTab()',1000); } window.onload=autoTab;第四步：效果
總結
- 上一篇： js树形菜单
- 下一篇： 如何缩短visual studio行号的