Tab選項卡延遲轉場效果js實現

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

上載者：User

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

標籤：images hidden nload select his line 論壇 img document

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="try.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;}

　　try.js

function $(id){    return typeof id===‘string‘?document.getElementById(id):id;}window.onload = function(){    var index=0;    var timer=null;    //擷取滑鼠滑過或點擊的標籤和要切換內容的元素    var titles = $(‘notice-tit‘).getElementsByTagName(‘li‘);    var divs  =$(‘notice-con‘).getElementsByTagName(‘div‘);    // alert(divs.length);    if(titles.length!=divs.length)        return;    for(var i=0;i<titles.length;i++){        titles[i].id=i;        titles[i].onmouseover=function(){            // 用that這個變數來引用當前滑過的li            var that=this;            // 如果存在準備執行的定時器，立刻清除，只有當前停留時間大於500ms時才開始執行            if(timer){                clearTimeout(timer);                timer=null;            }            // 延遲半秒執行            timer=window.setTimeout(function(){                for(var j=0;j<titles.length;j++){                    titles[j].className=‘‘;                    divs[j].style.display=‘none‘;                }                titles[that.id].className=‘select‘;                divs[that.id].style.display=‘block‘;            },500);        }    }}

　　效果：

2017-09-05 20:32:11

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