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

來源:互聯網
上載者:User

標籤: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實現

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: 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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.