宣傳頁項目開發（三）

時間 2020-02-11

標籤宣傳項目開發简体版

原文原文鏈接

網頁交互效果的實現javascript

滾動條高度的獲取以及設置：document.body.scrollTop || document.documentElement.scrollTopcss

.split() 把字符串分割成數組html

.join() 把數組轉爲字符串java

.replace( /\s+/g, " ") 正則全局替換，把多個空格符替換爲一個空格符數組

綜合效果app

index.html函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="animate.css">
</head>
<body>
    <!-- 頭部 -->
    <header>
        <div class="header-wrap">
            <div class="header-logo">微課手機</div>
            <nav class="header-nav">
                <a href="javascript:void(0);" class="header-nav-item">外觀</a>
                <a href="javascript:void(0);" class="header-nav-item">配置</a>
                <a href="javascript:void(0);" class="header-nav-item">型號</a>
                <a href="javascript:void(0);" class="header-nav-item">說明</a>
                <a href="javascript:void(0);" class="header-nav-item">其餘</a>
                <a href="javascript:void(0);" class="header-nav-item header-nav-item-button">當即購買</a>
                <div class="header-nav-tip"></div>
            </nav>
    </header>
    <!-- 第一屏 -->
    <div class="screen-1">
        <h2 class="screen-1-heading screen-1-heading-init"><span>微課手機</span> 讓你的生活更精彩</h2>
        <div class="screen-1-phone screen-1-phone-init"></div>
        <div class="screen-1-shadow screen-1-shadow-init"></div>
    </div>
    <!-- 第二屏 -->
    <div class="screen-2">
        <div class="screen-2-wrap">
            <h2 class="screen-2-heading">優美的設計，更使人着迷</h2>
            <h4 class="screen-2-subheading">採用受歡迎的設計，讓它更加出色。<br>款式小巧、輕便手感更溫馨。絢麗高清的顯示屏，整個外觀顯得格外精緻。</h4>
            <div class="screen-2-phone">
                <div class="screen-2-point screen-2-point-i1">高清攝像</div>
                <div class="screen-2-point screen-2-point-right screen-2-point-i2">超薄機身</div>
                <div class="screen-2-point screen-2-point-right screen-2-point-i3">大屏顯示</div>
            </div>
        </div>
    </div>
    <!-- 第三屏 -->
    <div class="screen-3">
        <div class="screen-3-wrap">
            <h2 class="screen-3-heading">優美的設計，更使人着迷</h2>
            <h4 class="screen-3-subheading">採用受歡迎的設計，讓它更加出色。<br>款式小巧、輕便手感更溫馨。絢麗高清的顯示屏，整個外觀顯得格外精緻。</h4>
            <div class="screen-3-phone"></div>
            <div class="screen-3-detail">
                <div class="screen-3-detail-item">
                    <div class="screen-3-detail-num">5.7</div>
                    <div class="screen-3-detail-desc">英寸大屏</div>
                </div>
                <div class="screen-3-detail-item">
                    <div class="screen-3-detail-num">1200</div>
                    <div class="screen-3-detail-desc">萬像素</div>
                </div>
                <div class="screen-3-detail-item">
                    <div class="screen-3-detail-num">3D</div>
                    <div class="screen-3-detail-desc">Touch</div>
                </div>
                <div class="screen-3-detail-item">
                    <div class="screen-3-detail-num">A9</div>
                    <div class="screen-3-detail-desc">處理器</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第四屏 -->
    <div class="screen-4">
        <div class="screen-4-wrap">
            <h2 class="screen-4-heading">豐富的手機型號</h2>
            <h4 class="screen-4-subheading">找到適合你的手機</h4>
            <div class="screen-4-phone">
                <div class="screen-4-phone-item screen-4-phone-i1">
                    <div class="screen-4-phone-color">微課紅</div>
                    <div class="screen-4-phone-model">32G/64G/138G</div>
                </div>
                <div class="screen-4-phone-item screen-4-phone-i2">
                    <div class="screen-4-phone-color">土豪金</div>
                    <div class="screen-4-phone-model">32G/64G/138G</div>
                </div>
                <div class="screen-4-phone-item screen-4-phone-i3">
                    <div class="screen-4-phone-color">太空灰</div>
                    <div class="screen-4-phone-model">32G/64G/138G</div>
                </div>
                <div class="screen-4-phone-item screen-4-phone-i4">
                    <div class="screen-4-phone-color">紳士黑</div>
                    <div class="screen-4-phone-model">32G/64G/138G</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第五屏 -->
    <div class="screen-5">
        <h2 class="screen-5-heading">遊戲、學習、拍照，有這一部就夠了</h2>
        <h4 class="screen-5-subheading">    看視頻、拍攝高清視頻與照片、視頻聊天、通話相結合，一機多功能，讓您生活更豐富精彩。
        </h4>
        <div class="screen-5-bg"></div>
    </div>
    <!-- 第六屏 -->
    <div class="screen-6">
        <button class="screen-6-btn">當即購買</button>
    </div>
    <!-- 底部 -->
    <footer>© 2020&nbsp;&nbsp;test.com&nbsp;&nbsp;浙ICP備00000000號</footer>
    <!-- 側導航 -->
    <div class="outline">
        <a href="javascript:void(0)" class="outline-item">外觀</a>
        <a href="javascript:void(0)" class="outline-item">配置</a>
        <a href="javascript:void(0)" class="outline-item">型號</a>
        <a href="javascript:void(0)" class="outline-item">說明</a>
        <a href="javascript:void(0)" class="outline-item">其它</a>
    </div>
    <script src="index.js"></script>
</body>
</html>

base.css學習

*{
    margin:0;
    padding:0;
}

a{
    text-decoration: none;
    color:#44484d;
}

ul{
    list-style:none;
}

body{
    color:#44484d;
}

h2{
    font-size:48px;
    font-weight:lighter;
    padding-top:81px;
    padding-bottom:15px;
}

h4{
    font-size:16px;
    line-height:30px;
    font-weight:normal;
    padding-bottom:15px;
}

/*# sourceMappingURL=base.css.map */

style.css動畫

/*頭部*/
header{
    background:#f7f7f7;
    width:100%;
    height:80px;
    transition:all 1s;
}
.header-black{
    background-color: rgba(0,0,0,.5);
    position: fixed;
    top:0;
    z-index:5;
    color:#fff;
}
.header-black a{
    color:#fff;
}
.header-wrap{
    width:1200px;
    height:100%;
    margin:0 auto;
    position: relative;
}
.header-logo{
    width:140px;
    height:39px;
    margin-left:24px;
    background:url(img/logo.png) left center no-repeat;
    background-size:39px 39px;
    text-indent:51px;
    line-height:39px;
    position: absolute;
    top:50%;
    margin-top:-20px;
    font-size:20px;
}
.header-nav{
    position: absolute;
    right:24px;
    height:39px;
    line-height:39px;
    top:50%;
    margin-top:-20px;
    font-size:14px;
}
/*滑動門特效*/
.header-nav-tip{
    position: absolute;
    bottom:-3px;
    left:0;
    width:30px;
    height:2px;
    background-color: #f04747;
    margin-left:45px;
    transition:all .5s;
}
.header-nav-item{
    display: block;
    float:left;
    padding-left:45px;
    width:30px;
}
.header-nav-item:hover{
    color:#f04747;
}
.header-nav-item-active{
    color:#f04747 !important;
    position: relative;
}
.header-nav-item-button{
    width:90px;
    height:39px;
    background-color:#07111b;
    color:#f4f4f5;
    text-align: center;
    border-radius:3px;
    padding-left:0;
    margin-left:45px;
}

/*第一屏*/
.screen-1{
    width:100%;
    height:795px;
    background:url(img/screen-1-bg.png) no-repeat;
    background-size:cover;
    text-align: center;
    position: relative;
}
.screen-1-heading{
    padding-top:138px;
    padding-bottom:94px;
    color:#4d555d;
}
.screen-1-heading span{
    color:#f04747;
}
.screen-1-phone{
    background:url(img/screen-1-phone.png) center no-repeat;
    width:1375px;
    height:305px;
    left:50%;
    margin-left:-687px;
    position: absolute;
    bottom:180px;
    z-index:2;
}
.screen-1-shadow{
    background:url(img/screen-1-shadow.png) center no-repeat;
    width:1183px;
    height:367px;
    left:50%;
    margin-left:-591px;
    position: absolute;
    bottom:30px;
    z-index:1;
}

/*第二屏*/
.screen-2{
    width:100%;
    height:800px;
    background:#fafafa;
}
.screen-2-wrap{
    width:1200px;
    height:100%;
    margin:0 auto;
    text-align: center;
    position: relative;
    overflow:hidden;
}
.screen-2-heading{
    color:#f04747;
}
.screen-2-subheading{
    color:#4d555d;
}
.screen-2-phone{
    background:url(img/screen-2-phone.png) center no-repeat;
    width:928px;
    height:530px;
    left:50%;
    margin-left:-464px;
    position: absolute;
    bottom:0;
}
.screen-2-point{
    font-weight:lighter;
    width:104px;
    padding-right:97px;
    background:url(img/screen-2-point-left.png) center right no-repeat;
    position: absolute;
}
.screen-2-point-right{
    padding-right:0;
    padding-left:97px;
    background:url(img/screen-2-point-right.png) center left no-repeat;
}
.screen-2-point-i1{
    top:160px;
    left:-153px;
}
.screen-2-point-i2{
    top:40px;
    right:150px;
}
.screen-2-point-i3{
    top:340px;
    right:40px;
}

/*第三屏*/
.screen-3{
    width:100%;
    height:800px;
    background:#fafafa;
    background:url(img/screen-3-bg.png) no-repeat;
    background-size:cover;
    position: relative;
}
.screen-3-wrap{
    width:1200px;
    padding:0 50px;
    height:100%;
    margin:0 auto;
    position: relative;
    color:#fff;    
    overflow:hidden;
}
.screen-3-phone{
    background:url(img/screen-3-phone.png) top right no-repeat;
    width:767px;
    height:576px;
    right:0;
    position: absolute;
    bottom:0;
}
.screen-3-detail{
    margin-top:152px;
    width:333px;
}
.screen-3-detail-item{
    width:140px;
    height:127px;
    border:1px solid #cd6d6f;
    float:left;
    border-radius:3px;
    margin-right:24px;
    text-align: center;
    margin-bottom:18px;
}
.screen-3-detail-num{
    font-size:48px;
    line-height:48px;
    padding-top:24px;
}
.screen-3-detail-desc{
    padding-top:5px;
}

/*第四屏*/
.screen-4{
    width:100%;
    height:800px;
}
.screen-4-wrap{
    width:1200px;
    height:100%;
    margin:0 auto;
    position: relative;
    text-align: center;
    z-index:2;
}
.screen-4-heading{
    padding-top:120px;
    padding-bottom:21px;
    color:#f04747;
}
.screen-4-subheading{
    padding-bottom:55px;
}
.screen-4-phone{
    width:1148px;
    height:355px;
}
.screen-4-phone-item{
    width:218px;
    height:355px;
    margin-right:92px;
    float:left;
    background:url(img/screen-4-phone.png) -26px top no-repeat;
}
.screen-4-phone-i1{
    background-position:-25px 0;
}
.screen-4-phone-i2{
    background-position:-301px 0;
}
.screen-4-phone-i3{
    background-position:-574px 0;
}
.screen-4-phone-i4{
    background-position:-846px 0;
    margin-right:0;
}
.screen-4-phone-color{
    padding-top:307px;
    font-size:16px;
}
.screen-4-phone-model{
    padding-top:9px;
    font-size:12px;
    color:#d8dadc;
}

/*第五屏*/
.screen-5{
    width:100%;
    height:800px;    
    background-color: #d9dde1;
    text-align: center;
    position: relative;
    overflow:hidden;
}
.screen-5-heading{
    padding-top:120px;
    padding-bottom:21px;
    color:#f04747;
}
.screen-5-subheading{
    padding-bottom:55px;
}
.screen-5-bg{
    width:1918px;
    height:433px;
    position: absolute;
    bottom:0;
    left:50%;
    margin-left:-959px;
    background:url(img/screen-5-bg.png) center no-repeat;
}

/*第六屏*/
.screen-6{
    width:100%;
    height:202px;
    background-color: #d9ddd1;
    background:url(img/screen-6-bg.png);
    text-align: center;
    padding-top:118px;
}
.screen-6-btn{
    width:243px;
    height:78px;
    line-height:78px;
    text-align: center;
    background:#f01414;
    color:#fff;
    border-radius:3px;
    font-size:24px;
    font-weight:lighter;
    border:none;
    box-shadow:0 0 10px rgba(0,0,0,.5);
    display: inline-block;
    cursor:pointer;
}

/*底部*/
footer{
    text-align: center;
    color:#fff;
    width:100%;
    height:80px;
    line-height:80px;
    background-color: #07111b;
    font-size:12px;
    font-weight:lighter;
}
/*側導航*/
.outline{
    position: fixed;
    right:0;
    bottom:160px;
    background-color: #fff;
    padding:0 10px;
    transition:all 1s;
    opacity: 0;
    transform:translate(100%,0);
}
.outline-in{
    opacity: 1;
    transform:translate(0,0);
}
.outline-item{
    display: block;
    height:47px;
    line-height:47px;
    width:27px;
    text-align: center;
    font-size:12px;
    border-top:1px solid #edf1f2;
}
.outline-item:first-child{
    border-top:0;
}
.outline-item-active{
    color:red;
}
/*# sourceMappingURL=style.css.map */

animate.cssurl

/*第一屏*/
.screen-1-heading{ transition:all 1s; }
.screen-1-heading-init{ opacity: 0;transform:translate(0,100%); }
.screen-1-heading-done{ opacity: 1;transform:translate(0,0); }

.screen-1-phone{ transition:all 1s; }
.screen-1-phone-init{ opacity: 0;transform:translate(0,-100%); }
.screen-1-phone-done{ opacity: 1;transform:translate(0,0); }

.screen-1-shadow{ transition:all 1s; }
.screen-1-shadow-init{ opacity: 0;transform:translate(0,-100%); }
.screen-1-shadow-done{ opacity: 1;transform:translate(0,0); }

/*第二屏*/
.screen-2-heading{ transition:all 1s; }
.screen-2-heading-init{ opacity: 0;transform:translate(0,-100%); }
.screen-2-heading-done{ opacity: 1;transform:translate(0,0); }

.screen-2-subheading{ transition:all 1s; }
.screen-2-subheading-init{ opacity: 0;transform:translate(0,100%); }
.screen-2-subheading-done{ opacity: 1;transform:translate(0,0); }

.screen-2-phone{ transition:all 1s; }
.screen-2-phone-init{ opacity: 0;transform:translate(0,100%); }
.screen-2-phone-done{ opacity: 1;transform:translate(0,0); }

.screen-2-point{ transition:all 1s .5s; }
.screen-2-point-i1-init{ opacity: 0;transform:translate(-100%,0); }
.screen-2-point-i1-done{ opacity: 1;transform:translate(0,0); }

.screen-2-point-i2-init{ opacity: 0;transform:translate(100%,0); }
.screen-2-point-i2-done{ opacity: 1;transform:translate(0,0); }

.screen-2-point-i3-init{ opacity: 0;transform:translate(100%,0); }
.screen-2-point-i3-done{ opacity: 1;transform:translate(0,0); }

/*圓點呼吸動畫*/
.screen-2-point::before,
.screen-2-point::after{
    content:"";
    display: block;
    width:20px;
    height:20px;
    position: absolute;
    top:0;
    left:0;
    background-color:rgba(255,0,0,.5);
    border-radius:50%;
    animation:bounce 2s infinite;
}
.screen-2-point::before{ animation:bounce 2s infinite 1s; }
.screen-2-point-i1::before,
.screen-2-point-i1::after{ top:0; left:auto; right:0; }
@keyframes bounce{
    0%,100%{ transform:scale(0); }
    50%{ transform:scale(1); }
}

/*第三屏*/
.screen-3-heading{ transition:all 1s; }
.screen-3-heading-init{ opacity: 0;transform:translate(0,-100%); }
.screen-3-heading-done{ opacity: 1;transform:translate(0,0); }

.screen-3-subheading{ transition:all 1s; }
.screen-3-subheading-init{ opacity: 0;transform:translate(0,100%); }
.screen-3-subheading-done{ opacity: 1;transform:translate(0,0); }

.screen-3-phone{ transition:all 1s; }
.screen-3-phone-init{ opacity: 0;transform:translate(0,100%); }
.screen-3-phone-done{ opacity: 1;transform:translate(0,0); }

.screen-3-detail{ transition:all 1s; }
.screen-3-detail-init{ opacity: 0;transform:scale(.5); }
.screen-3-detail-done{ opacity: 1;transform:scale(1); }

/*鼠標懸停時放大效果*/
.screen-3-detail-item{ transition: all .5s;cursor: pointer; }
.screen-3-detail-item:hover{ transform:scale(1.1);border-color:#fff; }

/*第四屏*/
.screen-4-heading{ transition:all 1s; }
.screen-4-heading-init{ opacity: 0;transform:translate(0,-100%); }
.screen-4-heading-done{ opacity: 1;transform:translate(0,0); }

.screen-4-subheading{ transition:all 1s; }
.screen-4-subheading-init{ opacity: 0;transform:translate(0,100%); }
.screen-4-subheading-done{ opacity: 1;transform:translate(0,0); }

.screen-4-phone-i1{ transition:all 1s .5s; }
.screen-4-phone-i1-init{ opacity: 0; }
.screen-4-phone-i1-done{ opacity: 1; }

.screen-4-phone-i2{ transition:all 1s 1s; }
.screen-4-phone-i2-init{ opacity: 0; }
.screen-4-phone-i2-done{ opacity: 1; }

.screen-4-phone-i3{ transition:all 1s 1.5s; }
.screen-4-phone-i3-init{ opacity: 0; }
.screen-4-phone-i3-done{ opacity: 1; }

.screen-4-phone-i4{ transition:all 1s 2s; }
.screen-4-phone-i4-init{ opacity: 0; }
.screen-4-phone-i4-done{ opacity: 1; }

/*第五屏*/
.screen-5-heading{ transition:all 1s; }
.screen-5-heading-init{ opacity: 0;transform:translate(0,-100%); }
.screen-5-heading-done{ opacity: 1;transform:translate(0,0); }

.screen-5-subheading{ transition:all 1s; }
.screen-5-subheading-init{ opacity: 0;transform:translate(0,100%); }
.screen-5-subheading-done{ opacity: 1;transform:translate(0,0); }

.screen-5-bg{ transition:all 1s; }
.screen-5-bg-init{ opacity: 0;transform:translate(0,100%); }
.screen-5-bg-done{ opacity: 1;transform:translate(0,0); }
/*# sourceMappingURL=animate.css.map */

index.js

// 函數封裝
//獲取元素
function getEle(selector){
    return document.querySelector(selector);
}
//獲取全部元素
function getAllEle(selector){
    return document.querySelectorAll(selector);
}
//獲取元素樣式
function getCls(element){
    return element.getAttribute("class");
}
//設置元素樣式
function setCls(element, cls){
    element.setAttribute("class", cls);
}
//添加元素樣式
function addCls(element, cls){
    var baseCls=getCls(element);
    if(baseCls.indexOf(cls)===-1){
        setCls(element, baseCls+" "+cls);
    }
}
//刪除元素樣式
function delCls(element, cls){
    var baseCls=getCls(element);
    if(baseCls.indexOf(cls)!=-1){
        //用cls做爲分隔符來分割字符串
        //全局替換，把多個空白符提換爲一個空白符
        setCls(element, baseCls.split(cls).join(" ").replace(/\s+/g," "));
    }
}

// 須要設置動畫的元素
var animateElements={
    ".screen-1":[
        ".screen-1-heading",
        ".screen-1-phone",
        ".screen-1-shadow"
    ],
    ".screen-2":[
        ".screen-2-heading",
        ".screen-2-subheading",
        ".screen-2-phone",
        ".screen-2-point-i1",
        ".screen-2-point-i2",
        ".screen-2-point-i3"
    ],
    ".screen-3":[
        ".screen-3-heading",
        ".screen-3-subheading",
        ".screen-3-phone",
        ".screen-3-detail"
    ],
    ".screen-4":[
        ".screen-4-heading",
        ".screen-4-subheading",
        ".screen-4-phone-i1",
        ".screen-4-phone-i2",
        ".screen-4-phone-i3",
        ".screen-4-phone-i4"
    ],
    ".screen-5":[
        ".screen-5-heading",
        ".screen-5-subheading",
        ".screen-5-bg"
    ]
}

//頁面加載完成後，設置樣式初始化
function setAnimateInit(screenName){//屏的類名，如： ".screen-1"
    var screen=document.querySelector(screenName);//獲取哪一屏
    var screenEles=animateElements[screenName];//獲取該屏下要動畫的全部元素

    for(var i=0,len=screenEles.length;i<len;i++){
        var newCls=screenEles[i].substr(1)+"-init";
        var screenEle=document.querySelector(screenEles[i]);//某個要動畫的元素
        var baseCls=screenEle.getAttribute("class");//獲取原來的類
        screenEle.setAttribute("class", baseCls+" "+newCls);//添加init類
    }
    return;
}
window.onload=function(){
    for(k in animateElements){
        if(k===".screen-1"){
            continue;//跳過第一屏
        }
        setAnimateInit(k);
    }
}

//單獨設置第一屏動畫
setTimeout(function(){
    setAnimateDone(".screen-1");
},200);

var headerItems=getAllEle(".header-nav-item");
var outlineItems=getAllEle(".outline-item");
    function headerActive(index){
    for(var i=0,len=headerItems.length;i<len;i++){    
        delCls(headerItems[i], "header-nav-item-active");
    }
    addCls(headerItems[index], "header-nav-item-active");
}
function outlineActive(index){
    for(var i=0,len=outlineItems.length;i<len;i++){    
        delCls(outlineItems[i], "outline-item-active");
    }
    addCls(outlineItems[index], "outline-item-active");
}
headerActive(0);//導航變紅
outlineActive(0);//側導航變紅

//導航側導航的雙向綁定
for(var i=0,len=headerItems.length;i<len;i++){    
    setJump(i, headerItems);//調用跳轉函數
}
for(var i=0,len=outlineItems.length;i<len;i++){    
    setJump(i, outlineItems);//調用跳轉函數
}

function setJump(i, item){
    item[i].onclick=function(){
        document.body.scrollTop=i*800;
        document.documentElement.scrollTop=i*800;
    }
}

//滑動門特效
var headerTip=getEle(".header-nav-tip");
for(var i=0,len=headerItems.length-1;i<len;i++){
    moveAnimate(i,headerItems);
}
function moveAnimate(i,lib){
    lib[i].onmouseover=function(){
        headerTip.style.left=(i*75)+"px";
    }
}

//頁面滾動到哪裏，就播放到哪裏
function setAnimateDone(screenName){
    var screen=document.querySelector(screenName);//獲取哪一屏
    var screenEles=animateElements[screenName];//獲取該屏下要動畫的全部元素

    for(var i=0,len=screenEles.length;i<len;i++){            
        var screenEle=document.querySelector(screenEles[i]);//某個要動畫的元素
        var baseCls=screenEle.getAttribute("class");//獲取原來的類
        var newCls=baseCls.replace("-init", "-done");
        screenEle.setAttribute("class", newCls);
    }
}
window.onscroll=function(){
    var top=document.body.scrollTop || document.documentElement.scrollTop;

    if(top>80){
        // 導航條樣式改變，側導航出現
        setCls(getEle("header"), "header-black");
        addCls(getEle(".outline"), "outline-in");
    }else{
        // 導航條樣式復原，側導航消失
        delCls(getEle("header"), "header-black");
        delCls(getEle(".outline"), "outline-in");
    }
    if(top>1){
        setAnimateDone(".screen-1");
        headerActive(0);//導航變紅
        outlineActive(0);//側導航變紅
        headerTip.style.left=(0*75)+"px";
    }
    if(top>800*1-100){
        setAnimateDone(".screen-2");
        headerActive(1);
        outlineActive(1);
        moveAnimate(1,headerItems);
        headerTip.style.left=(1*75)+"px";
    }
    if(top>800*2-100){
        setAnimateDone(".screen-3");
        headerActive(2);
        outlineActive(2);
        moveAnimate(2,headerItems);
        headerTip.style.left=(2*75)+"px";
    }
    if(top>800*3-100){
        setAnimateDone(".screen-4");
        headerActive(3);
        outlineActive(3);
        moveAnimate(3,headerItems);
        headerTip.style.left=(3*75)+"px";
    }
    if(top>800*4-100){
        setAnimateDone(".screen-5");
        headerActive(4);
        outlineActive(4);
        moveAnimate(4,headerItems);
        headerTip.style.left=(4*75)+"px";
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。