老师,第一屏滚动没有效果是怎么回事?麻烦老师帮忙看一下是哪里打错了
代码顺序依次为:HTML、index.js、test.js、animate.css、index.css,老师我第一屏没有效果,再顺便帮忙看一下注释有没有错误
<!DOCTYPE html> <html> <head> <title>个人网页</title> <link rel="stylesheet" type="text/css" href="css/base.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="stylesheet" type="text/css" href="css/animate.css"> </head> <body> <!-- 头部 --> <header class="header"> <div class="header__wrap"> <div class="header__logo">慕课手机</div> <nav class="header__nav"> <!-- 点击不会有触发 --> <a href="javascript:;" class="header__nav-item header__nav-item_status_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_custom_button">立即购买</a> </nav> </div> </header> <!-- 第一屏 --> <div class="screen-1"> <!-- 文字 --> <h2 class="screen-1__heading"><b>慕课手机</b>让你的生活更精彩</h2> <!-- 手机 --> <div class="screen-1__phone"></div> <!-- 阴影 --> <div class="screen-1__shadow"></div> </div> <!-- 第二屏 --> <div class="screen-2"> <!-- 文字 --> <h2 class="screen-2__heading">优美的设计,更令人着迷</h2> <h3 class="screen-2__subheading">采用最受欢迎的设计,让它更加出色。<br/>款式小巧、轻便手感更舒适。绚丽高清的显示屏,整个外观显得格外精致。</h3> <!-- 手机 --> <div class="screen-2__phone"> <div class="screen-2__point screen-2__point_i_1">高清摄像</div> <div class="screen-2__point screen-2__point_custom_right screen-2__point_i_2">超薄机身</div> <div class="screen-2__point screen-2__point_custom_right screen-2__point_i_3">大屏显示</div> </div> </div> <!-- 第三屏 --> <div class="screen-3"> <div class="screen-3__wrap"> <!-- 文字 --> <h2 class="screen-3__heading">外形小巧,功能强大的手机</h2> <h3 class="screen-3__subheading">采用最受欢迎的设计,让它更加出色。<br/>款式小巧、轻便手感更舒适。绚丽高清的显示屏,整个外观显得格外精致。</h3> <!-- 手机 --> <div class="screen-3__phone"></div> <div class="screen-3__features"> <div class="screen-3__features__item"> <div class="screen-3__features__item__number">5.7</div> <div class="screen-3__features__item__desc">英寸大屏</div> </div> <div class="screen-3__features__item"> <div class="screen-3__features__item__number">1200</div> <div class="screen-3__features__item__desc">万像素</div> </div> <div class="screen-3__features__item"> <div class="screen-3__features__item__number">3D</div> <div class="screen-3__features__item__desc">touch</div> </div> <div class="screen-3__features__item"> <div class="screen-3__features__item__number">A9</div> <div class="screen-3__features__item__desc">处理器</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__button" href="javascript:;">立即购买</a> </div> <!-- 底部 --> <footer class="footer"> © 2016 imooc.com 京ICP备13046642号 </footer> <!-- 导航侧边栏 --> <div class="outline"> <a href="javascript:;" class="outline__item outline__item_status_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 type="text/javascript" src="js./test.js"></script> <script type="text/javascript" src="js./index.js"></script> </body> </html>
//获取元素 var getElem = function(selector){ return document.querySelector(selector); } var getAllElem = function(selector){ return document.querySelector(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); } } // 为元素删除样式 var delCls = function(element , cls){ var baseCls = getCls(element); //如果能找到这个样式,就删除 if( baseCls.indexOf(cls) != -1){ setCls( element , baseCls.split(cls).join(' ') .replace(/\s+/g,' ')); } } // 页面载入完成后,所有动画元素设置_animate_init // 第一步:初始化样式 init var screenAnimateElements = { // 每屏动画 '.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_i_1', '.screen-2__point_i_2', '.screen-2__point_i_3', ], '.screen-3' : [ '.screen-3__heading', '.screen-3__phone', '.screen-3__subheading', '.screen-3__features', ], '.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', ], }; // 把某个屏幕上有动画样式的都设为init //设置屏内元素为初始状态 var setScreenAnimateInit = function(screenCls){ var screen = document.querySelector(screenCls);//获取当前屏的元素 var animateElements = screenAnimateElements[screenCls];//需要设置动画的元素 for(var i=0; i<animateElements.length; i++){ var element = document.querySelector(animateElements[i]); var baseCls = element.getAttribute('class'); element.setAttribute('class',baseCls +' '+animateElements[i].substr(1)+'_animate_init'); } } // 设置播放屏内的元素动画 var playScreenAnimateDone = function(screenCls){ var screen = document.querySelector(screenCls);//获取当前屏的元素 var animateElements = screenAnimateElements[screenCls];//需要设置动画的元素 for(var i=0; i<animateElements.length; i++){ var element = document.querySelector(animateElements[i]); var baseCls = element.getAttribute('class'); element.setAttribute('class',baseCls.replace('_animate_init','_animate_done')); } } window.onload = function(){ console.log('onload'); // 每一屏动画 for(k in screenAnimateElements){ setScreenAnimateInit(k); } } // 第二步:滚动到哪里,就播放到哪里 window.onscroll = function(){ var top = document.body.scrollTop; console.log(top); // 滚动条大于800时要让第一屏播放 if(top > 1){ playScreenAnimateDone('.screen-1'); } }
// 将有动画效果的放一起 var screenAnimateElements = { // 每屏动画 '.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_i_1', '.screen-2__point_i_2', '.screen-2__point_i_3', ], '.screen-3' : [ '.screen-3__heading', '.screen-3__phone', '.screen-3__subheading', '.screen-3__features', ], '.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 setScreenAnimate(screenCls){ var screen = document.querySelector(screenCls);//获取当前屏的元素 var animateElements = screenAnimateElements[screenCls];//需要设置动画的元素 //测试是否有初始化子元素的样式 var isSetAnimateClass = false; //当前屏幕下所有子元素的状态是DONE? var isAnimateDone = false; screen.onclick = function(){ // 初始化样式,增加init(A A_init) if( isSetAnimateClass === false){ for(var i=0; i<animateElements.length; i++){ var element = document.querySelector(animateElements[i]); var baseCls = element.getAttribute('class'); element.setAttribute('class',baseCls +' '+animateElements[i].substr(1)+'_animate_init'); } isSetAnimateClass = true; return ; } //切换所有的 AnimateElements 的 init ——> done (A A_done) if( isAnimateDone === false){ for(var i=0; i<animateElements.length; i++){ var element = document.querySelector(animateElements[i]); var baseCls = element.getAttribute('class'); element.setAttribute('class',baseCls.replace('_animate_init','_animate_done')); } isAnimateDone = true; return ; } //切换所有的 AnimateElements 的 done ——> init (A A_init) if( isAnimateDone === true){ for(var i=0; i<animateElements.length; i++){ var element = document.querySelector(animateElements[i]); var baseCls = element.getAttribute('class'); element.setAttribute('class',baseCls.replace('_animate_done','_animate_init')); } isAnimateDone = false; return ; } } } // 每一屏动画 for(k in screenAnimateElements){ setScreenAnimate(k); }
/*第一屏文字内容*/ /*第一屏文字*/ .screen-1__shadow, .screen-1__phone, .screen-1__heading{ transition: all 1s; } .screen-1__heading_animate_init{ opacity: 0; transform: translate(0,100%); } .screen-1__shadow_animate_done, .screen-1__phone_animate_done, .screen-1__heading_animate_done{ opacity: 1; transform: translate(0,0); } /*第一屏手机*/ .screen-1__phone_animate_init{ opacity: 0; transform: translate(0,-100%); } /*第一屏手机阴影*/ .screen-1__shadow_animate_init{ opacity: 0; transform: translate(0,100%); } /*第二屏动画*/ .screen-2__subheading, .screen-2__phone, .screen-2__heading{ transition: all 1s; } .screen-2__heading_animate_init{ opacity: 0; transform: translate(0,-100%); } .screen-2__subheading_animate_init{ opacity: 0; transform: translate(0,100%); } .screen-2__phone_animate_init{ opacity: 0; transform: translate(0,50%); } .screen-2__phone_animate_done, .screen-2__subheading_animate_done, .screen-2__heading_animate_done{ opacity: 1; transform: translate(0,0); } .screen-2__point{ transition: all 1s 1s; } .screen-2__point_done{ opacity: 1; transform: translate(0,0); } .screen-2__point_i_1_animate_init{ opacity: 0; transform: translate(-100%,0); } .screen-2__point_i_3_animate_init, .screen-2__point_i_2_animate_init{ opacity: 0; transform: translate(100%,0); } /*第三屏动画*/ .screen-3__features, .screen-3__subheading, .screen-3__phone, .screen-3__heading{ transition: all 1s; } .screen-3__phone_animate_done, .screen-3__subheading_animate_done, .screen-3__heading_animate_done{ opacity: 1; transform: translate(0,0); } .screen-3__heading_animate_init{ opacity: 0; transform: translate(0,-100%); } .screen-3__phone_animate_init, .screen-3__subheading_animate_init{ opacity: 0; transform: translate(0,100%); } .screen-3__features_animate_init{ opacity: 0; transform: scale(.5); } .screen-3__features_animate_done{ opacity: 1; transform: scale(1); } .screen-3__features__item{ transition: all .5s; cursor: pointer; } .screen-3__features__item:hover{ transform: scale(1.1); border-color: #fff; } /*第四屏动画*/ .screen-4__subheading, .screen-4__heading{ transition: all 1s; } .screen-4__heading_animate_init{ opacity: 0; transform: translate(0,-100%); } .screen-4__subheading_animate_init{ opacity: 0; transform: translate(0,100%); } .screen-4__type__item_i_1{ transition: all 1s .5s; } .screen-4__type__item_i_2{ transition: all 1s 1s; } .screen-4__type__item_i_3{ transition: all 1s 1.5s; } .screen-4__type__item_i_4{ transition: all 1s 2s; } .screen-4__type__item_i_1_animate_init, .screen-4__type__item_i_2_animate_init, .screen-4__type__item_i_3_animate_init, .screen-4__type__item_i_4_animate_init{ opacity: 0; } .screen-4__type__item_i_1_animate_done, .screen-4__type__item_i_2_animate_done, .screen-4__type__item_i_3_animate_done, .screen-4__type__item_i_4_animate_done{ opacity: 1; } /*第五屏动画*/ .screen-5__bg, .screen-5__subheading, .screen-5__heading{ transition: all 1s; } .screen-5__heading_animate_init{ opacity: 0; transform: translate(0,-100%); } .screen-5__bg_animate_init, .screen-5__subheading_animate_init{ opacity: 0; transform: translate(0,100%); } /*定义帧动画*/ @-webkit-keyframes bounce { 0%,100% { transform: scale(0); } 50% { transform: scale(1); } } /*给第二屏的手机介绍使用帧动画*/ .screen-2__point:before, .screen-2__point:after{ content: ' '; display: block; width: 20px; height: 20px; position: absolute; top: 1px; left: 0px; background-color: rgba(255,0,0,0.4); border-radius: 50%; -webkit-animation: bounce 2s infinite; } .screen-2__point:before{ -webkit-animation: bounce 2s infinite 1s; } .screen-2__point_i_1:after, .screen-2__point_i_1:before{ left: 200px; }
/* BEM设计模式 模块(没有前缀,多个单词用“-”连接) 元素(元素在模块之后,可以有多个层级,以__连接) 修饰(某元素、或某模块特别的状态,必须有一个状态名和状态值,使用_连接) */ /*头部*/ .header{ background-color: #f7f7f7; } /*包含内容*/ .header__wrap{ height: 80px; width: 1200px; position: relative; margin: 0 auto; } /*logo*/ .header__logo{ width: 100px; height: 38px; line-height: 38px; font-size: 20px; color: #07111b; padding-left: 50px; background:url('../img/logo.png') left center no-repeat; background-size: 38px 38px; position: absolute; top:50%; margin-top: -19px; left: 20px; } /*导航*/ .header__nav{ position: absolute; right: 20px; height: 38px; top: 50%; margin-top: -19px; } /*导航内元素*/ .header__nav-item{ color: #292f35; font-size: 14px; display: block; height: 38px; line-height: 38px; float: left; margin-left: 40px; position: relative; } /*鼠标移入导航文字变红*/ .header__nav-item:hover{ color: #f01400; } /*状态与状态值*/ .header__nav-item_status_active{ color: #f01400; } /*导航的下划线*/ .header__nav-item_status_active::after{ content:' '; display: block; width: 100%; height: 2px; position: absolute; background-color: #f01400; left: 0; bottom: 0; } /*导航条上的按钮*/ .header__nav-item_custom_button{ background: #000; color: #f4f4f5; text-align: center; width: 90px; border-radius: 3px; } /*第一屏*/ .screen-1{ height: 800px; background-color: #e7e7e7; background:url(../img/bg-screen-1.png) no-repeat center; 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{ height: 800px; background-color: #fafafa; position: relative; overflow: hidden; } /*大标题*/ .screen-2__heading{ font-weight: normal; margin:0; padding: 0; font-size: 46px; line-height: 46px; color: #f01400; text-align: center; padding-top: 96px; } /*子标题*/ .screen-2__subheading{ font-weight: normal; margin:0; padding: 0; font-size: 14px; color: #2c3137; text-align: center; padding-top: 25px; line-height: 28px; } /*手机*/ .screen-2__phone{ width: 928px; height: 873px; background:url(../img/screen-2-phone.png) no-repeat center; position: absolute; left: 50%; margin-left: -464px; bottom: -345px; z-index: 2; } /*手机描述*/ .screen-2__point{ width: 108px; height: 22px; padding-right: 112px; font-size: 22px; line-height: 22px; color: #4d555d; position: absolute; background:url(../img/icon-point-right.png) no-repeat center right; } .screen-2__point_custom_right{ padding:0 0 0 112px; background:url(../img/icon-point-left.png) no-repeat center left; } /*手机描述位置*/ .screen-2__point_i_1{ top: 150px; left: -164px; } .screen-2__point_i_2{ top: 30px; right: 130px; } .screen-2__point_i_3{ top: 330px; right: 30px; } /*第三屏*/ .screen-3{ height: 800px; background-color: red; position: relative; overflow: hidden; background:url(../img/bg-screen-3.png) no-repeat center; /*让背景图撑满整个屏*/ background-size: cover; } /*第三屏容器*/ .screen-3__wrap{ width: 1200px; height: auto; margin: 0 auto; position: relative; } /*大标题*/ .screen-3__heading{ font-size: 46px; line-height: 46px; color: #fff; text-align: left; padding-top: 94px; } /*子标题*/ .screen-3__subheading{ font-size: 14px; color: #fff; text-align: left; padding-top: 25px; line-height: 28px; } /*手机*/ .screen-3__phone{ width: 750px; height: 873px; background:url(../img/screen-3-phone.png) no-repeat center top; position: absolute; right: 0; top: 195px; z-index: 2; } /*左侧内容*/ .screen-3__features{ position: absolute; top: 395px; left: 0; width: 320px; height: 280px; } .screen-3__features__item{ width: 138px; height: 118px; border: 1px solid #cb7173; margin: 0 20px 20px 0; float: left; border-radius: 3px; color: #fff; text-align: center; } .screen-3__features__item__number{ height: 36px; font-size: 36px; line-height: 36px; padding: 28px 0 8px; } .screen-3__features__item__desc{ height: 14px; font-size: 14px; line-height: 14px; } /*第四屏*/ .screen-4{ height: 800px; background-color: #fff; position: relative; overflow: hidden; } .screen-4__wrap{ width: 1200px; height: auto; margin: 0 auto; position: relative; } /*大标题*/ .screen-4__heading{ font-size: 46px; line-height: 46px; color: #f01400; text-align: center; padding-top: 135px; } /*子标题*/ .screen-4__subheading{ font-size: 14px; color: #464a4f; text-align: center; padding-top: 29px; line-height: 28px; } /*手机型号*/ .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__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-5__heading{ font-size: 46px; line-height: 46px; color: #f01400; text-align: center; padding-top: 130px; } /*子标题*/ .screen-5__subheading{ font-size: 14px; color: #2c3137; text-align: center; padding-top: 25px; line-height: 28px; } /*第六屏*/ .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__button{ 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__button:hover{ box-shadow: 0px 0px 10px #fff; } /*底部*/ .footer{ height: 80px; line-height: 80px; text-align: center; color: #fff; font-size: 12px; background-color: #07111b; } /*导航侧边栏*/ .outline{ position: fixed; padding: 5px 10px; bottom: 120px; right: 0; z-index: 3; background-color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.5) } .outline__item{ display: block; width: 40px; height: 30px; line-height: 30px; text-align: center; padding: 5px 0; background-color: #fff; margin-top: 5px; border-top: 1px solid #eee; color: #93999f; } .outline__item:first-child{ border: none; } .outline__item_status_active{ color: red; }
39
收起
正在回答
5回答
同学你好,第一屏本来就不需要加滚动效果的,它是页面刚打开的时候就需要执行的,修改参考:
1、手动给第一屏添加init状态:
2、在遍历各屏元素,给其初始化时,应该将第一屏去掉:
3、再手动给第一屏设置done状态:
如果我的回答帮助了你,欢迎采纳,祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星