码迷，mamicode.com
首页 > Web开发 > 详细

JS宣传页项目-综合实战

时间：2020-01-02 20:32:12      阅读：85      评论：0      收藏：0      [点我收藏+]

标签：首页   substr   开始   etc   point   tar   ase   兼容性   lin   

按照国际惯例先放图

技术图片

 

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;

JS宣传页项目-综合实战

标签：首页   substr   开始   etc   point   tar   ase   兼容性   lin   

原文地址：https://www.cnblogs.com/chenyingying0/p/12141706.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！