Tab選項卡自動轉場效果js實現

最後更新：2017-09-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：geo tle code ora asc ack onload oct sheet

try.html

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title></title>    <link rel="stylesheet" type="text/css" href="try.css">    <script type="text/javascript" src="script.js"></script></head><body><div id="notice" class="notice">    <div class="notice-tit" id="notice-tit">        <ul>            <li><a href="#">公告</a></li>            <li><a href="#">規則</a></li>            <li><a href="#">論壇</a></li>            <li><a href="#">安全</a></li>            <li class="select"><a href="#">公益</a></li>        </ul>    </div>    <div id="notice-con" class="notice-con">        <div class="mod" style="display: none;">            <ul>                <li><a href="#">張勇：玩快樂足球</a></li>                <li><a href="#">張勇：玩快樂足球</a></li>                <li><a href="#">張勇：玩快樂足球</a></li>                <li><a href="#">張勇：玩快樂足球</a></li>            </ul>        </div>        <div class="mod" style="display: none;">            <ul>                <li><span>[<a href="#">通知</a>]</span><a href="#">張勇：要玩快樂足球</a></li>                <li><span>[<a href="#">通知</a>]</span><a href="#">張勇：要玩快樂足球</a></li>                <li><span>[<a href="#">通知</a>]</span><a href="#">張勇：要玩快樂足球</a></li>                <li><span>[<a href="#">通知</a>]</span><a href="#">張勇：要玩快樂足球</a></li>            </ul>        </div>        <div class="mod" style="display: none;">            <ul>                <li><span>[<a href="#">通知</a>]</span><a href="#">張勇：玩快樂足球</a></li>                <li><span>[<a href="#">通知</a>]</span><a href="#">張勇：玩快樂足球</a></li>                <li><span>[<a href="#">通知</a>]</span><a href="#">張勇：玩快樂足球</a></li>                <li><span>[<a href="#">通知</a>]</span><a href="#">張勇：玩快樂足球</a></li>            </ul>        </div>        <div class="mod" style="display: none;">            <ul>                <li><a href="#">張勇：要玩快樂</a></li>                <li><a href="#">張勇：要玩快樂足球</a></li>                <li><a href="#">張勇：要玩快樂足球</a></li>                <li><a href="#">張勇：要玩快樂足球</a></li>            </ul>        </div>        <div class="mod" style="display: block;">            <ul>                <li><a href="#">張勇：要玩快樂</a></li>                <li><a href="#">張勇：要玩快樂足球</a></li>                <li><a href="#">張勇：要玩快樂足球</a></li>                <li><a href="#">張勇：要玩快樂</a></li>            </ul>        </div>    </div></div></body></html>

try.css

*{    margin: 0;    padding:0;    list-style: none;    font-size: 12px;}.notice{    width: 298px;    height: 98px;    margin: 10px;    border: 1px solid #eee;    overflow: hidden;}.notice-tit{    height: 27px;    position: relative;    background-color: #f7f7f7;}.notice-tit ul{    position: absolute;    width: 301px;    left: -1px;}.notice-tit ul li{    float: left;    width: 58px;    height: 26px;    text-align: center;    line-height: 26px;    overflow: hidden;    padding: 0 1px;    background: #f7f7f7;    border-bottom: 1px solid #eee;}.notice-tit ul li.select{    background: #fff;    border-bottom-color: #fff;    border-left: 1px solid #eee;    border-right: 1px solid #eee;    padding: 0;    font-weight: bolder;}.notice li a:link,.notice-tit li a:visited{    text-decoration: none;    color: #000;}.notice li a:hover{    color: #f90;}.notice-con .mod{    margin: 10px 10px 10px 19px;}.notice-con .mod ul li{    float: left;    width: 134px;    height: 25px;    overflow: hidden;}

　　script.js

function $(id){return typeof id===‘string‘?document.getElementById(id):id;}window.onload=tab;function tab(){  var index=0;  var timer=null;  var lis=$(‘notice-tit‘).getElementsByTagName(‘li‘);  var divs=$(‘notice-con‘).getElementsByTagName(‘div‘);  for(var i=0;i<lis.length;i++){    lis[i].id=i;    lis[i].onmouseover=function(){      clearInterval(timer);      changeOption(this.id);    }    lis[i].onmouseout=function(){        timer=setInterval(autoPlay,2000);        }  }    if(timer){    clearInterval(timer);    timer=null;  }   // ???????????????????????  timer=setInterval(autoPlay,2000);  function autoPlay(){      index++;      if(index>=lis.length){         index=0;      }      changeOption(index);  }  function changeOption(curIndex){    for(var j=0;j<lis.length;j++){       lis[j].className=‘‘;       divs[j].style.display=‘none‘;    }    lis[curIndex].className=‘select‘;    divs[curIndex].style.display=‘block‘;    index=curIndex;  }}

　　效果：

2017-09-05 20:45:21

Tab選項卡自動轉場效果js實現

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More