用選項卡控制DIV層切換改變背景顏色

2024-09-05 12:21:54

字體：大中小

來源：轉載

供稿：網友

用選項卡控制DIV層的切換從頁適時改變網頁指定區域的背景顏色，并利用CSS的濾鏡將背景顏色填充為漸變色，從這個實例我們可以學到不少東西哦。

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>層切換</title><style> #red{  display:block;  float:left;  position:absolute;  width:336px;  height:336px;  background-color:#ff0000;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=deeppink);}#green{  display:none;  float:left;  position:absolute;  width:336px;  height:336px;  background-color:#00ff00;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=green);}#blue{  display:none;  float:left;  position:absolute;  width:336px;  height:336px;  background-color:#0000ff;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=skyblue,endColorStr=darkblue);}#switch{  position:absolute;  top:336px;  width:336px;  height:30px;  background-color:#003399;}#switch a.tabs{  float:left;  color:#ffffff;  height:28px;  width:100px;  margin:0;  padding:8px 0 0 14px;  font-size:12px;  cursor:pointer;  text-decoration:none;text-align:center;  }#switch a.tabs:hover{  color:#ffff00;  background-color:#666666;  text-decoration:none;}body{filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=orange);}</style><script language="javascript"> function switchbox(i){ selectbox(i);}function selectbox(i){ switch(i) { case 1: document.getElementById("red").style.display="block"; document.getElementById("green").style.display="none"; document.getElementById("blue").style.display="none"; break; case 2: document.getElementById("red").style.display="none"; document.getElementById("green").style.display="block"; document.getElementById("blue").style.display="none"; break; case 3: document.getElementById("red").style.display="none"; document.getElementById("green").style.display="none"; document.getElementById("blue").style.display="block"; break; }}</script></head><body><div style="position:absolute;top:19px;left:320px;"><div   class="66qsigu"   id="content"><div   class="i2s64ik"   id="red"></div><div   class="mw4kyky"   id="green"></div><div   class="mg4ek6e"   id="blue"></div></div><div   class="u6w26ke"   id="switch">紅色綠色藍色</div></div></body></html>

上一篇：js滑動圖片菜單

下一篇：點擊鼠標在網頁上生成氣泡

學習交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注