JS宣传页项目-综合实战

按照国际惯例先放图

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <!-- 基本样式 -->
    <link rel="stylesheet" href="style.css">
    <!-- 动画效果 -->
    <link rel="stylesheet" href="animate.css">
</head>
<body>
    <!-- 导航 -->
    <header class="header">
        <div class="header_wrap">
            <div class="header_logo">XX手机</div>
            <nav class="header_nav">
                <a href="javascript:;" class="header_nav_item header_nav_item_active">首页</a>
                <a href="javascript:;" class="header_nav_item">外观</a>
                <a href="javascript:;" class="header_nav_item">配置</a>
                <a href="javascript:;" class="header_nav_item">型号</a>
                <a href="javascript:;" class="header_nav_item">说明</a>
                <a href="javascript:;" class="header_nav_item header_nav_item_btn">立即购买</a>
                <div class="header_nav_tip"></div>
            </nav>
        </div>
    </header>
    <!-- 第一屏 -->
    <div class="screen_1">
        <h2 class="screen_1_heading screen_1_heading_animate_init"><b>XX手机</b> 让你的生活更精彩</h2>
        <div class="screen_1_phone screen_1_phone_animate_init"></div>
        <div class="screen_1_shadow screen_1_shadow_animate_init"></div>
    </div>
    <!-- 第二屏 -->
    <div class="screen_2">
        <h2 class="screen_2_title">优美的设计,更令人着迷</h2>
        <h3 class="screen_2_subtitle">采用受欢迎的设计,让它更加出色。<br>款式小巧、轻便手感更舒适。绚丽高清的显示屏,整个外观显得格外精致。</h3>
        <div class="screen_2_phone">
            <div class="screen_2_phone_point screen_2_phone_point1">高清摄像</div>
            <div class="screen_2_phone_point screen_2_phone_point2">超薄机身</div>
            <div class="screen_2_phone_point screen_2_phone_point3">大屏显示</div>
        </div>
    </div>
    <!-- 第三屏 -->
    <div class="screen_3">
        <div class="screen_3_wrap">
            <h2 class="screen_3_title">外形小巧,功能强大的手机</h2>
            <h3 class="screen_3_subtitle">采用受欢迎的设计,让它更加出色。<br> 款式小巧、轻便手感更舒适。绚丽高清的显示屏,整个外观显得格外精致。</h3>
            <div class="screen_3_phone"></div>
            <div class="screen_3_feature">
                <div class="screen_3_feature_item">
                    <div class="screen_3_feature_item_big">5.7</div>
                    <div class="screen_3_feature_item_small">英寸大屏</div>
                </div>
                <div class="screen_3_feature_item">
                    <div class="screen_3_feature_item_big">1200</div>
                    <div class="screen_3_feature_item_small">万像素</div>
                </div>
                <div class="screen_3_feature_item">
                    <div class="screen_3_feature_item_big">3D</div>
                    <div class="screen_3_feature_item_small">touch</div>
                </div>
                <div class="screen_3_feature_item">
                    <div class="screen_3_feature_item_big">A9</div>
                    <div class="screen_3_feature_item_small">处理器</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第四屏 -->
    <div class="screen_4">
        <div class="screen_4_wrap">
            <h2 class="screen_4_heading">丰富的手机型号</h2>
            <h3 class="screen_4_subheading">找到适合你的手机</h3>
            <div class="screen_4_type">
                <div class="screen_4_type_item screen_4_type_item_i_1">
                    <div class="screen_4_type_item_color">慕课红</div>
                    <div class="screen_4_type_item_storage">16G/32G/64G</div>
                </div>
                <div class="screen_4_type_item screen_4_type_item_i_2">
                    <div class="screen_4_type_item_color">土豪金</div>
                    <div class="screen_4_type_item_storage">16G/32G/64G</div>
                </div>
                <div class="screen_4_type_item screen_4_type_item_i_3">
                    <div class="screen_4_type_item_color">太空灰</div>
                    <div class="screen_4_type_item_storage">16G/32G/64G</div>
                </div>
                <div class="screen_4_type_item screen_4_type_item_i_4">
                    <div class="screen_4_type_item_color">绅士黑</div>
                    <div class="screen_4_type_item_storage">16G/32G/64G</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第五屏 -->
    <div class="screen_5">
        <h2 class="screen_5_heading">游戏、学习、拍照、有这一部就够了</h2>
        <h3 class="screen_5_subheading">看视频、拍摄高清视频与照片、视频聊天、一机多功能,让您生活更丰富精彩。</h3>
        <div class="screen_5_bg"></div>
    </div>
    <!-- 底部 -->
    <div class="screen_buy">
        <a class="screen_buy_btn" href="javascript:;">立即购买</a>
    </div>
    <footer class="footer">
        © 2019 test.com 京ICP备xxxxxxxx号
    </footer>
    <!-- 侧导航 -->
    <div class="outline">
        <a href="javascript:;" class="outline_item outline_item_active">首页</a>
        <a href="javascript:;" class="outline_item">外观</a>
        <a href="javascript:;" class="outline_item">配置</a>
        <a href="javascript:;" class="outline_item">型号</a>
        <a href="javascript:;" class="outline_item">说明</a>
    </div>
    <script src="script.js"></script>
</body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #fff;
    font-size: 12px;
    font-family: "Microsoft Yahei","微软雅黑"
}
a{
    text-decoration: none;
}
/*导航*/
header{
    background-color: #f7f7f7;
}
.header_wrap{
    height:80px;
    width:1200px;
    margin:0 auto;
    position: relative;
}
.header_logo{
    background:url(img/logo.png) no-repeat;
    width:150px;
    height:40px;
    line-height: 40px;
    text-indent:50px;
    position: absolute;
    top:50%;
    margin-top:-20px;
    font-size:20px;
}
.header_nav{
    position: absolute;
    right:25px;
    height:40px;
    line-height: 40px;
    top:50%;
    margin-top:-20px;
}
.header_nav_item{
    display: block;
    float: left;
    padding-left:48px;
    color:#292f35;
    font-size:14px;
    width:30px;
    text-align: center;
    position: relative;
}
.header_nav_item_active{
    color:#f01400;
}
/*.header_nav_item_active::after{
    content:‘ ‘;
    position: absolute;
    width:31px;
    height:2px;
    background-color: #f01400;
    top:35px;
    left:-1px;
}*/
.header_nav_item_btn{
    width:90px;
    background:#07111b;
    color:white;
    border-radius:5px;
    padding:0 5px;
    margin-left:48px;
}
/*第一屏*/
.screen_1{
    height: 800px;
    background-color: #e7e7e7;
    position: relative;
    overflow: hidden;
    background:url(img/bg-screen-1.png) no-repeat center;
    background-size: cover;
}
.screen_1_heading{
    font-weight: normal;
    margin: 0;
    padding: 0;
    font-size:46px;
    color: #4d555d;
    text-align: center;
    padding-top: 152px;
}
.screen_1_heading b{
    color: #f01400;
    font-weight: normal;
}
.screen_1_phone{
    width: 1375px;
    height: 305px;
    background:url(img/screen-1-phone.png) no-repeat center;
    position: absolute;
    left: 50%;
    margin-left: -687px;
    bottom: 180px;
    z-index: 2;
}
.screen_1_shadow{
    width: 1233px;
    height: 411px;
    background:url(img/screen-1-shadow.png) no-repeat center;
    position: absolute;
    left: 50%;
    margin-left: -616px;
    bottom: 30px;
    z-index: 1;
    opacity: .8;
}
/*第二屏*/
.screen_2{
    text-align: center;
    padding-top:56px;
    background:#fafafa;
}
.screen_2_title{
    color:#f01414;
    font-size:48px;
    font-weight:normal;
}
.screen_2_subtitle{
    color:#07111b;
    font-size:16px;
    font-weight:normal;
    margin-top:15px;
    line-height:2em;
    margin-bottom:40px;
}
.screen_2_phone{
    width:1200px;
    margin:0 auto;
    background:url(img/screen-2-phone.png) top center no-repeat;
    height:579px;
    overflow:hidden;
    position: relative;
}
.screen_2_phone_point{
    position: absolute;
    width: 230px;
    height: 48px;
    padding-right: 20px;
    line-height: 48px;
    background: url(img/icon-point-right.png) right no-repeat;
}
.screen_2_phone_point1{
    top: 146px;
    left: -56px;
}
.screen_2_phone_point2{
    background: url(img/icon-point-left.png) left no-repeat;
    top: 25px;
    right: 235px;
}
.screen_2_phone_point3{
    background: url(img/icon-point-left.png) left no-repeat;
    top: 319px;
    right: 135px;
}
/*第三屏*/
.screen_3{
    height:803px;
    background:url(img/bg-screen-3.png) no-repeat;
    overflow:hidden;
}
.screen_3_wrap{
    width:1200px;
    margin:0 auto;
    color:#fff;
    position: relative;
}
.screen_3_title{
    font-size:48px;
    padding-top:84px;
    font-weight:normal;
}
.screen_3_subtitle{
    font-size:16px;
    font-weight:normal;
    margin-top:34px;
    line-height:30px;
}
.screen_3_phone{
    width: 800px;
    background: url(img/screen-3-phone.png) top right no-repeat;
    height: 657px;
    position: absolute;
    right: 0;
    top: 200px;
    background-size: 90%;
}
.screen_3_feature{
    width:400px;
    position:absolute;
    top:380px;
    left:0;
}
.screen_3_feature_item{
    width:176px;
    height:125px;
    border:1px solid #fff;
    border-radius:5px;
    text-align: center;
    padding-top:30px;
    margin-right:22px;
    float: left;
    margin-bottom:25px;
}
.screen_3_feature_item_big{
    font-size:48px;
}
.screen_3_feature_item_small{
    font-size:16px;
}
/*第四屏*/
.screen_4{
    background-color: #ffffff;
    height: 800px;
    position: relative;
    overflow: hidden;
}
.screen_4_wrap{
    width: 1200px;
    height: auto;
    margin: 0 auto;
    position: relative;
}
.screen_4_heading{
    font-size:48px;
    line-height: 48px;
    color: #f01400;
    text-align: center;
    padding-top: 135px;
    font-weight:normal;
}
.screen_4_subheading{
    font-size:16px;
    color: #464a4f;
    text-align: center;
    padding-top: 29px;
    line-height: 28px;
    font-weight:normal;
}
.screen_4_type{
    width: 1260px;
    height: 270px;
    position: absolute;
    top: 304px;
    margin-left: 30px;
}
.screen_4_type_item{
    width: 220px;
    margin-right: 90px;
    height: 270px;
    float: left;
    position: relative;
    text-align: center;
    background-size: cover;
}
.screen_4_type_item_color{
    width: 100%;
    height: 14px;
    line-height: 14px;
    font: 14px;
    color: #2c3238;
    position: absolute;
    bottom: -44px;
}
.screen_4_type_item_i_1{
    background: url(‘img/phone-1.png‘) no-repeat left top;
}
.screen_4_type_item_i_2{
    background: url(‘img/phone-2.png‘) no-repeat left top;
}
.screen_4_type_item_i_3{
    background: url(‘img/phone-3.png‘) no-repeat left top;
}
.screen_4_type_item_i_4{
    background: url(‘img/phone-4.png‘) no-repeat left top;
}
.screen_4_type_item_storage{
    width: 100%;
    height: 12px;
    line-height: 12px;
    font: 12px;
    color: #a4a9ae;
    position: absolute;
    bottom: -66px;
}
/*第五屏*/
.screen_5{
    height: 800px;
    position: relative;
    overflow: hidden;
    background-color: #d9dde1;
}
.screen_5_heading{
    font-size:48px;
    line-height: 48px;
    color: #f01400;
    text-align: center;
    padding-top: 130px;
    font-weight:normal;
}
.screen_5_subheading{
    font-size:16px;
    color: #2c3137;
    text-align: center;
    padding-top: 25px;
    line-height: 28px;
    font-weight:normal;
}
.screen_5_bg{
    width: 1920px;
    height: 433px;
    background:url(img/bg-screen-5.png)  no-repeat center;
    background-size: contain;
    position: absolute;
    left: 50%;
    margin-left: -960px;
    bottom: -100px;
}
/*底部*/
.screen_buy{
    height: 80px;
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    background: #2b333b url(‘img/bg-screen-buy.png‘) center no-repeat;
    text-align: center;
}
.screen_buy_btn{
    height: 80px;
    width: 240px;
    text-align: center;
    line-height: 80px;
    font-size: 24px;
    color: #fff;
    background-color: #f01414;
    display: inline-block;
    border-radius: 3px;
    transition: all .5s;
}
.screen_buy_btn:hover{
    box-shadow: 0px 0px 10px rgba(0,0,0,.5);
}
.footer{
    height: 80px;
    line-height: 80px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    background-color: #07111b;
}
/*侧导航*/
.outline{
    width:66px;
    position: fixed;
    right:0;
    top:50%;
    margin-top:-98px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,.1);
}
.outline_item{
    display: block;
    color:#93999f;
    font-size:12px;
    text-align: center;
    height:45px;
    line-height:45px;
    border-bottom:1px solid #c3c6c9;
    margin:0 20px;
}
.outline_item:last-child{
    border:none;
}
.outline_item_active{
    color:#f01400;
}
/*导航滑动门特效*/
.header_nav_tip{
    position: absolute;
    width:30px;
    height:2px;
    background-color:#f01400;
    bottom:0;
    left:0;
    margin-left:47px;
    transition:all 1s;
}

animate.css

/*第一屏*/
    /*screen_1_heading*/
    .screen_1_heading{
        transition: all 1s;
    }
    .screen_1_heading_animate_init{
        opacity: 0;
        transform:translate(0,100%);
    }
    .screen_1_heading_animate_done{
        opacity: 1;
        transform:translate(0,0);
    }
    /*screen_1_phone*/
    .screen_1_phone{
        transition: all 1s;
    }
    .screen_1_phone_animate_init{
        opacity: 0;
        transform:translate(0,-100%);
    }
    .screen_1_phone_animate_done{
        opacity: 1;
        transform:translate(0,0);
    }
    /*screen_1_shadow*/
    .screen_1_shadow{
        transition: all 1s;
    }
    .screen_1_shadow_animate_init{
        opacity: 0;
        transform:translate(0,-100%);
    }
    .screen_1_shadow_animate_done{
        opacity: 1;
        transform:translate(0,0);
    }

/*第二屏*/
    /*screen_2_title*/
    .screen_2_title{
        transition: all 1s;
    }
    .screen_2_title_animate_init{
        opacity: 0;
        transform: translate(0,-100%);
    }
    .screen_2_title_animate_done{
        opacity: 1;
        transform: translate(0,0);
    }
    /*screen_2_subtitle*/
    .screen_2_subtitle{
        transition: all 1s;
    }
    .screen_2_subtitle_animate_init{
        opacity: 0;
        transform: translate(0,100%);
    }
    .screen_2_subtitle_animate_done{
        opacity: 1;
        transform: translate(0,0);
    }
    /*screen_2_phone*/
    .screen_2_phone{
        transition: all 1s;
    }
    .screen_2_phone_animate_init{
        opacity: 0;
        transform: translate(0,50%);
    }
    .screen_2_phone_animate_done{
        opacity: 1;
        transform: translate(0,0);
    }
    /*screen_2_phone_point*/
    .screen_2_phone_point{
        transition: all 1s 1s;
    }
    .screen_2_phone_point1_animate_init{
        opacity: 0;
        transform: translate(-100%,0);
    }
    .screen_2_phone_point2_animate_init,
    .screen_2_phone_point3_animate_init{
        opacity: 0;
        transform: translate(100%,0);
    }
    .screen_2_phone_point_animate_done{
        opacity: 1;
        transform: translate(0,0);
    }

/*第三屏*/
    /*screen_3_title*/
    .screen_3_title{
        transition: all 1s;
    }
    .screen_3_title_animate_init{
        opacity: 0;
        transform: translate(0,-100%);
    }
    .screen_3_title_animate_done{
        opacity: 1;
        transform: translate(0,0);
    }
    /*screen_3_subtitle*/
    .screen_3_subtitle{
        transition: all 1s;
    }
    .screen_3_subtitle_animate_init{
        opacity: 0;
        transform: translate(0,100%);
    }
    .screen_3_subtitle_animate_done{
        opacity: 1;
        transform: translate(0,0);
    }
    /*screen_3_phone*/
    .screen_3_phone{
        transition: all 1s;
    }
    .screen_3_phone_animate_init{
        opacity: 0;
        transform: translate(0,100%);
    }
    .screen_3_phone_animate_done{
        opacity: 1;
        transform: translate(0,0);
    }
    /*screen_3_feature*/
    .screen_3_feature{
        transition: all 1s;
    }
    .screen_3_feature_animate_init{
        opacity: 0;
        transform: scale(.5);
    }
    .screen_3_feature_animate_done{
        opacity: 1;
        transform: scale(1);
    }
    /*screen_3_feature_item*/
    .screen_3_feature_item{
        transition: all .5s;
        cursor: pointer;
    }
    .screen_3_feature_item:hover{
        transform: scale(1.1);
        border-color: #fff;
    }

/*第四屏*/
    /*screen_4_heading*/
    .screen_4_heading{
        transition: all 1s;
    }
    .screen_4_heading_animate_init{
        opacity: 0;
        transform: translate(0,-100%);
    }
    .screen_4_heading_animate_done{
        opacity: 1;
        transform: translate(0,0);
    }
    /*screen_4_subheading*/
    .screen_4_subheading{
        transition: all 1s;
    }
    .screen_4_subheading_animate_init{
        opacity: 0;
        transform: translate(0,100%);
    }
    .screen_4_subheading_animate_done{
        opacity: 1;
        transform: translate(0,0);
    }
    /*screen_4_type_item_i_1*/
    .screen_4_type_item_i_1{
        transition: all 1s .5s;
    }
    .screen_4_type_item_i_1_animate_init{
        opacity: 0;
    }
    .screen_4_type_item_i_1_animate_done{
        opacity: 1;
    }
    /*screen_4_type_item_i_2*/
    .screen_4_type_item_i_2{
        transition: all 1s 1s;
    }
    .screen_4_type_item_i_2_animate_init{
        opacity: 0;
    }
    .screen_4_type_item_i_2_animate_done{
        opacity: 1;
    }
    /*screen_4_type_item_i_3*/
    .screen_4_type_item_i_3{
        transition: all 1s 1.5s;
    }
    .screen_4_type_item_i_3_animate_init{
        opacity: 0;
    }
    .screen_4_type_item_i_3_animate_done{
        opacity: 1;
    }
    /*screen_4_type_item_i_4*/
    .screen_4_type_item_i_4{
        transition: all 1s 2s;
    }
    .screen_4_type_item_i_4_animate_init{
        opacity: 0;
    }
    .screen_4_type_item_i_4_animate_done{
        opacity: 1;
    }

/*第五屏*/
    /*screen_5_heading*/
    .screen_5_heading{
        transition: all 1s;
    }
    .screen_5_heading_animate_init{
        opacity: 0;
        transform: translate(0,-100%);
    }
    .screen_5_heading_animate_done{
        opacity: 1;
        transform: translate(0,0);
    }
    /*screen_5_subheading*/
    .screen_5_subheading{
        transition: all 1s;
    }
    .screen_5_subheading_animate_init{
        opacity: 0;
        transform: translate(0,100%);
    }
    .screen_5_subheading_animate_done{
        opacity: 1;
        transform: translate(0,0);
    }
    /*screen_5_bg*/
    .screen_5_bg{
        transition: all 1s;
    }
    .screen_5_bg_animate_init{
        opacity: 0;
        transform: translate(0,100%);
    }
    .screen_5_bg_animate_done{
        opacity: 1;
        transform: translate(0,0);
    }

/*帧动画*/
@-webkit-keyframes bounce{
    0%,100%{
        transform:scale(0);
    }
    50%{
        transform:scale(1);
    }
}
/*第二屏小圆点呼吸效果*/
    .screen_2_phone_point:before,
    .screen_2_phone_point:after{
        display: block;
        width:20px;
        height:20px;
        content:‘ ‘;
        background-color: rgba(255,0,0,.4);
        top:15px;
        position: absolute;
        -webkit-animation:bounce 2s infinite;
        border-radius: 50%;
    }
    .screen_2_phone_point:before{
        -webkit-animation:bounce 2s infinite 1s;
    }
    .screen_2_phone_point1:before,
    .screen_2_phone_point1:after{
        left:229px;
    }

/*导航条动画样式*/
    .header{
        transition: all 1s;
    }
    .header_status_black{
        background: rgba(0,0,0,.5);
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        z-index: 3;
    }
    .header_status_black .header_nav_item,
    .header_status_black .header_logo{
        color: #fff;
    }
    .header_status_black .header_nav_item_active{
        color:#f01400;
    }
    .header_status_black .header_nav_item:hover{
        transition: all 1s;
        color: red;
    }

/*侧导航动画效果*/
    .outline{
        transform: translate(100%,0);
        transition: all 1s;
    }
    .outline_status_in{
        transform: translate(0,0);
    }
    .outline_item{
        transition: all 1s;
    }

script.js

// 基本函数封装
    // 获取元素
    var getElem = function( selector ){
      return document.querySelector(selector);
    }
    var getAllElem = function( selector ){
      return document.querySelectorAll(selector);
    }
    // 获取元素的样式
    var getCls = function ( element ) {
      return element.getAttribute(‘class‘);
    }
    // 设置元素的样式
    var setCls = function( element ,cls){
      return element.setAttribute(‘class‘,cls);
    }
    // 为元素添加样式
    var addCls = function( element , cls ){
      var baseCls  = getCls(element);
      if( baseCls.indexOf(cls) === -1){
          setCls(element,baseCls+‘ ‘+cls); // 注意空格
      }
      return ;
    }
    // 为元素删减样式
    var delCls = function( element , cls){
      var baseCls  = getCls(element);
      if( baseCls.indexOf(cls) > -1){ // 更精确的需要用正则表达式 ,因为这里只用于切换 _animate_in 所以没事
          setCls( element,baseCls.split(cls).join(‘ ‘).replace(/\s+/g,‘ ‘) );
      }
      return ;
    }

// 定义哪些元素拥有动画
    var animateEles={
        ‘.screen_1‘:[
            ‘.screen_1_heading‘,
            ‘.screen_1_phone‘,
            ‘.screen_1_shadow‘
        ],
        ‘.screen_2‘:[
            ‘.screen_2_title‘,
            ‘.screen_2_subtitle‘,
            ‘.screen_2_phone‘,
            ‘.screen_2_phone_point1‘,
            ‘.screen_2_phone_point2‘,
            ‘.screen_2_phone_point3‘
        ],
        ‘.screen_3‘:[
            ‘.screen_3_title‘,
            ‘.screen_3_subtitle‘,
            ‘.screen_3_phone‘,
            ‘.screen_3_feature‘
        ],
        ‘.screen_4‘:[
            ‘.screen_4_heading‘,
            ‘.screen_4_subheading‘,
            ‘.screen_4_type_item_i_1‘,
            ‘.screen_4_type_item_i_2‘,
            ‘.screen_4_type_item_i_3‘,
            ‘.screen_4_type_item_i_4‘
        ],
        ‘.screen_5‘:[
            ‘.screen_5_heading‘,
            ‘.screen_5_subheading‘,
            ‘.screen_5_bg‘
        ]
    };

//给当前屏元素添加初始化样式
    function setInit(screenEle){
        var screen=document.querySelector(screenEle);//获取当前屏
        var animateEle=animateEles[screenEle]; // 获取需要添加动画的元素

        for(var i=0;i<animateEle.length;i++){
            var ele=document.querySelector(animateEle[i]);
            var baseCls=ele.getAttribute(‘class‘);
            var newCls=baseCls+‘ ‘+animateEle[i].substr(1)+‘_animate_init‘;
            ele.setAttribute(‘class‘,newCls);
        }
    }

//设置所有元素开始动画
    function startAnimate(screenEle){
        var screen=document.querySelector(screenEle);//获取当前屏
        var animateEle=animateEles[screenEle]; // 获取需要添加动画的元素

        for(var i=0;i<animateEle.length;i++){
            var ele=document.querySelector(animateEle[i]);
            var baseCls=ele.getAttribute(‘class‘);
            var newCls=baseCls.replace(‘_animate_init‘,‘_animate_done‘);
            ele.setAttribute(‘class‘,newCls);
        }
    }

//第一步,页面所有元素初始化
    window.onload = function () {
        for(k in animateEles){
            if(k==‘.screen_1‘){
                continue;
            }
              setInit(k);
        }
    }

//第二步,滚动到哪里就播放哪里
    var navs=getAllElem(‘.header_nav_item‘);
    var outlines=getAllElem(‘.outline_item‘);
    var navTip=getElem(‘.header_nav_tip‘);

    //切换主导航对应样式
    var switchActive=function(idx){
        for(var i=0;i<navs.length;i++){
            delCls(navs[i],‘header_nav_item_active‘);
            navTip.style.left=0+‘px‘;
        }
        addCls(navs[idx],‘header_nav_item_active‘);
        navTip.style.left=(idx*78)+‘px‘;

        for(var i=0;i<outlines.length;i++){
            delCls(outlines[i],‘outline_item_active‘);
        }
        addCls(outlines[idx],‘outline_item_active‘);
    }
    //默认导航0高亮
    switchActive(0);

    window.onscroll=function(){
        var top=document.body.scrollTop||document.documentElement.scrollTop;
        console.log(top);

        //导航条样式变动
        if( top > 100 ){
            addCls( getElem(‘.header‘),‘header_status_black‘ );
            addCls( getElem(‘.outline‘),‘outline_status_in‘ );
        }else{
            delCls( getElem(‘.header‘),‘header_status_black‘ );
            delCls( getElem(‘.outline‘),‘outline_status_in‘ );
            switchActive(0);
        }

        if(top>1){
            startAnimate(‘.screen_1‘);
        }
        if(top>800*1-200){
            startAnimate(‘.screen_2‘);
            switchActive(1);
        }
        if(top>800*2-200){
            startAnimate(‘.screen_3‘);
            switchActive(2);
        }
        if(top>800*3-200){
            startAnimate(‘.screen_4‘);
            switchActive(3);
        }
        if(top>800*4-200){
            startAnimate(‘.screen_5‘);
            switchActive(4);
        }
    }

// 第三步,双向绑定
    // 封装导航跳转函数
    var setJump=function(i,lib){
        lib[i].onclick=function(){
            document.body.scrollTop=i*800;
            document.documentElement.scrollTop=i*800;
        }
    }

    // 绑定主导航
    for(var i=0;i<navs.length;i++){
        setJump(i,navs);
    }
    // 绑定侧导航
    for(var i=0;i<outlines.length;i++){
        setJump(i,outlines);
    }

//第四步,滑动门特效

    var setTip=function(i,lib){
        //鼠标移入
        lib[i].onmouseover=function(){
            navTip.style.left=(i*78)+‘px‘;
        }
        var activeIdx=0;
        //鼠标移出
        lib[i].onmouseout=function(){
            for(var i=0;i<navs.length;i++){
                if(getCls(lib[i]).indexOf(‘header_nav_item_active‘)>-1){
                    activeIdx=i;
                    break;
                }
            }
            navTip.style.left=(activeIdx*78)+‘px‘;
        }
    }

    for(var i=0;i<navs.length-1;i++){
        setTip(i,navs);
    }

setTimeout(function(){
    startAnimate(‘.screen_1‘);
},200);

其余杂碎知识点补充:

前端切图

透明背景图处理:

选择指定图层(ctrl+enter)

拖拽到一个新建文件的透明图层中(ctrl+c   ctrl+n   ctrl+v)

点击图像-裁切(基于透明像素)



多个图层的,可以先ctrl+e合并图层,再按照以上方法拖拽出来处理

非透明背景图可以直接裁剪完另存为



同类型图片可以做成雪碧图



BEM设计模式

模块(没有前缀,多个单词用-分割)

元素(在模块之后,多个层级以_连接)



css实现动画的两种方式:

1、  transition:all 1s;

2、  animation:move 2s indinite ease-in-out .5s;

@keyframes move{

0%{transform:rotate(0deg)}

50%{transform:rotate(2deg)}

100%{transform:rotate(0deg)}

}



获取滚动高度的兼容性写法

var top=document.body.scrollTop||document.documentElement.scrollTop;

原文地址:https://www.cnblogs.com/chenyingying0/p/12141706.html

时间: 2024-11-10 13:47:20

JS宣传页项目-综合实战的相关文章

宣传页项目实战

编辑器:sublime text3 标注工具:PxCook 切图工具:PS 开发前准备:设计图标注 PxCook  空格键可以上下拖动 大致标注图纸:(可惜不能文字标注和拉参考线) 开发前准备:PS切图 在指定图层上新建一个图层,使用ctrl+e 合并图层,可以将任意图层转为普通图层 (如果图层是下面图层的剪贴图层,可以把该图层移动到新建图层的上面再合并) (如果图层羽化较多,ctrl+enter无法选中,则直接ctrl+c) ctrl+enter 框选需要的图层内容 ctrl+c 复制图层 c

宣传页项目开发(三)

网页交互效果的实现 滚动条高度的获取以及设置:document.body.scrollTop || document.documentElement.scrollTop .split()  把字符串分割成数组 .join()  把数组转为字符串 .replace( /\s+/g, " ")  正则全局替换,把多个空格符替换为一个空格符 综合效果 index.html <!DOCTYPE html> <html lang="en"> <h

Node.js Express+Mongodb 项目实战

Node.js Express+Mongodb 项目实战 这是一个简单的商品管理系统的小项目,包含的功能还算挺全的,项目涵盖了登录.注册,图片上传以及对商品进行增.删.查.改等操作,对于新手来说是个很不错的练手项目,分享给大家. GitHub源码:https://github.com/oceanMin/cms 项目前准备 安装node.js 安装express 安装mongoDB 章节目录 快速开始 快速开始 模块 express商品管理系统介绍 框架搭建.ejs .express.static

【前端】Vue.js经典开源项目汇总

Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过

Vue.js经典开源项目汇总

Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过

vue2 入门 教程 单页应用最佳实战[*****]

推荐 vue2 入门 教程 -------- 看过其他的,再看作者的,很赞 vue2 入门 教程 单页应用最佳实战 :  具体在 https://github.com/MeCKodo/vue-tutorial ----------------------------- 通过本文,我们可以学习到许多关于vue的特性. 1.了解了vue-cli脚手架 2.初步对webpack有了一些了解和认识 3.如何用.vue愉快的开发 4.使用vuex进行组件通信 5.路由(子路由)的应用 6.使用 vue-d

Eclipse rcp 项目开发实战2 : 创建插件开发工程

输入工程名称,其它默认即可 输入创建插件工程相关信息,Rich Client Application 要选择Yes 来创建RCP工程,其它数据一般默认即可. 选择模板,也就是Demo,在这一步选择完成后,其实就可以直接Finish了. 最后一步,输入名字,包名和应用的类的名称 一个简单地插件工程就已经创建完成. 启动工程,第一次启动有三种方法, 6.1 选择工程,右键Run As -- Eclipse Application 即可, 6.2 打开mf文件, 下拉选择,Launch an Ecli

基于plusgantt的项目管理系统实战开发

<基于plusgantt的项目管理系统实战开发(Spring3+JDBC+RMI的架构.自定义工作流)> 课程讲师:Adam 课程分类:Java 适合人群:中级 课时数量:37课时 用到技术:Spring 3+JDBC+RMI的架构.jquery.工作流 涉及项目:项目管理系统 咨询QQ:1337192913(小公子) 本课程是某航空研究所的真正项目的缩影.在课程中,将实际项目的业务进行了缩减,但是主要的技术点全部都讲解到了. 课程内容虽然不多,但是麻雀虽小五脏俱全,通过学习本课程,可以掌握到

iOS项目开发实战——storyboard设置界面技巧与注意事项

在iOS开发中,使用Main.storyboard来设计界面是每一个iOS开发人员需要面对的问题,使用storyboard相比较Android中使用XML来设置布局,有优点也有缺陷,现在我们来谈谈storyboard的设计技巧. (1)直接使用鼠标右键可以直接缩放storyboard的缩放比例.当然你也可以用触摸板使用2根手指缩放. . (2)拖拽控件绑定到代码中,不一定要从设计界面的控件中进行拖拽,也可以直接从左侧的列表中拖拽,这样会更加清晰方便. . (3)如何添加修改超过一屏的控件.我们把