2. Java
  3. H5实战页面

H5实战页面

xiaoxiao2021-02-28  139

html

<!DOCTYPE html> <html> <head> <title>H5实战页面</title> <!-- 引入初始化css样式表 --> <link rel="stylesheet" type="text/css" href="./css/normalize.css"> <!-- 引入css样式表 --> <link rel="stylesheet" type="text/css" href="./css/style.css"> <!-- 引入配合js动画的css样式表 --> <link rel="stylesheet" type="text/css" href="./css/animation.css"> </head> <body> <header class="header"> <div class="header__logo">H5实战页面</div> <div class="header__nav"> <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">云端学习</a> <a href="javascript:;" class="header__nav-item header__nav-item-button">即可学习</a> <div class="header__nav-tip"></div> </div> </header> <!-- screen-1 --> <section class="screen-1"> <div class="screen-1__wrap"> <h1 class="screen-1__heading screen-1__heading_animate_init">实战课程重磅上线</h1> <h3 class="screen-1__subheading screen-1__subheading_animate_init">一键云学习，还在等待什么？</h3> </div> </section> <!-- screen-2 --> <section class="screen-2"> <div class="screen-2__wrap"> <h1 class="screen-2__heading">每门课都是真实的商业案例</h1> <h3 class="screen-2__subheading"> 真实案例，真实场景，在实践中时间，操作，调试，<br > 大牛带你体验BAT真实的开发流程，所有开发过程---为你呈现 </h3> <div class="screen-2__pic"> <div class="screen-2__pic-i-1"> </div> <div class="screen-2__pic-i-2"> </div> </div> </div> </section> <!-- screen-3 --> <section class="screen-3"> <div class="screen-3__wrap"> <div class="screen-3__pic"></div> <h1 class="screen-3__heading">强大的语言课程体系支持</h1> <h3 class="screen-3__subheading"> 学习环境与课程轻松对接，安装，调试，写入，部署，运行，一站式解决<br > ，让你体验开发全流程。 </h3> <ul class="screen-3__type"> <li class="screen-3__type-item">HTMl5</li> <li class="screen-3__type-item">PHP</li> <li class="screen-3__type-item">JAVA</li> <li class="screen-3__type-item">Python</li> <li class="screen-3__type-item">Node.js</li> </ul> </div> </section> <!-- screen-4 --> <section class="screen-4"> <div class="screen-4__wrap"> <h1 class="screen-4__heading"> 省去复杂的环境搭建</h1> <h3 class="screen-4__subheading">你可以告别在虚拟机中调试开发了</h3> <ul class="screen-4__type"> <li class="screen-4__type-item screen-4__type-item-i-1"> <span class="screen-4__type-item-text"> 实战课程集成开发环境 </span> </li> <li class="screen-4__type-item screen-4__type-item-i-2"> <span class="screen-4__type-item-text"> 内置终端命令行 </span> </li> <li class="screen-4__type-item screen-4__type-item-i-3"> <span class="screen-4__type-item-text"> 编译你的应用程序 </span> </li> <li class="screen-4__type-item screen-4__type-item-i-4"> <span class="screen-4__type-item-text"> 通过云端服务器输出效果 </span> </li> </ul> </div> </section> <!-- screen-5 --> <section class="screen-5"> <div class="screen-5__wrap"> <div class="screen-5__pic"></div> <h1 class="screen-5__heading"> 云端学习可以这样简单 </h1> <h3 class="screen-5__subheading"> 看视频，敲代码，一气呵成，结合慕课网为你提供的云端学习工具 ，所见即所得，从此学习不一样。 </h3> </div> </section> <!-- submit-area --> <section class="submit-area"> <div class="submit-area__wrap"> <a href="javascript:;" class="submit-area-button">继续学习了解体验</a> </div> </section> <!-- footer --> <footer class="footer"> <div class="footer__wrap"> <nav class="footer__type"> <a href="javascript:;" class="footer__type-item">网站首页</a> <a href="javascript:;" class="footer__type-item">人才招聘</a> <a href="javascript:;" class="footer__type-item">联系我们</a> <a href="javascript:;" class="footer__type-item">高校联盟</a> <a href="javascript:;" class="footer__type-item">关于我们</a> <a href="javascript:;" class="footer__type-item">讲师招募</a> <a href="javascript:;" class="footer__type-item">意见反馈</a> <a href="javascript:;" class="footer__type-item">友情链接</a> </nav> <div class="footer__copy">Copyright 2015 imoooc.com All Right Reserved | 京 ICP备 13046642号-2 </div> </div> </footer> <!-- outline --> <div class="outline"> <a href="javascript:;" class="outline__item outline__item_i_1">时</a> <a href="javascript:;" class="outline__item outline__item_i_2">课</a> <a href="javascript:;" class="outline__item outline__item_i_3">强</a> <a href="javascript:;" class="outline__item outline__item_i_4">省</a> <a href="javascript:;" class="outline__item outline__item_i_5">云</a> </div> <!-- 引入js文件 --> <script type="text/javascript" src="./js/script.js"></script> </body> </html>

style.css

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, form, tr, td, span, i, em, strong, p, a {margin: 0;padding: 0;font-family: "Microsoft YaHei";font-size: 14px;} a {text-decoration: none;} img {border: 0;vertical-align: bottom;} ul, li, ol {list-style: none;} .clearfix:before, .clearfix:after {content: ' ';display: table;} .clearfix:after {clear: both;} .w-1200 {width: 1200px;margin: 0 auto;position: relative;} /* BEM 设计模式 模块（没有前缀，多个单词用- 链接） 元素（元素在模块之后，可以有多个层级，以__链接） 修饰（某元素，或者某模块特别的状态，必须有一个状态名和状态值，使用_链接） */ .header {position: fixed;top: 0;left: 0;width: 100%;height: 80px;line-height: 80px;background: rgba(255, 255, 255, .8);z-index: 3;min-width: 1200px;} .header__logo {position: absolute;top: 50%;left: 0;margin-top: -20px;margin-left: 10px;height: 40px;line-height: 40px;width: 90px;padding-left: 60px;color: #666;background: url("../images/logo.png") no-repeat left center;cursor: pointer;transition: all .3s ease;-webkit-transition: all .3s ease;-ms-transition: all .3s ease;-moz-transition: all .3s ease;} .header__logo:hover {color: #333} .header__nav {position: absolute;top: 50%;right: 0;margin-top: -20px;height: 40px;line-height: 40px;} .header__nav-item {height: 40px;line-height: 40px;text-align: center;float: left;font-size: 14px;color: #666;padding-left: 32px;} .header__nav-item:hover {color: #333;} .header__nav-item:first-child {padding-left: 0;} .header__nav-item:last-child {} .header__nav-item-button {padding-left: 0;margin-left: 32px;margin-right: 32px;border-radius: 5px;width: 90px;height: 40px;line-height: 40px;text-align: center;background: #e53e3e;color: #fff;} .header__nav-item-button:hover {background: #f00;color: #fff;} /* .screen-1 */ .w-1200 {width: 1200px;margin: 0 auto;position: relative;} .screen-1 {height: 640px;background: url("../images/sc1.jpg") no-repeat;background-size: cover;text-align: center;} .screen-1__wrap {width: 1200px;margin: 0 auto;position: relative;height: 640px;} .screen-1__heading {position: absolute;top: 233px;width: 100%;height: 36px;line-height: 36px;font-size: 36px;color: #fff;} .screen-1__subheading {position: absolute;top: 312px;height: 18px;width: 100%;line-height: 18px;font-size: 18px;color: #fff;font-weight: 100;} /* screen-2 */ .screen-2 {height: 640px;text-align: center;} .screen-2__wrap {width: 1200px;height: 640px;margin: 0 auto;position: relative;overflow: hidden;} .screen-2__heading {position: absolute;top: 88px;width: 100%;font-size: 36px;color: #333;} .screen-2__heading:after {content: ' ';display: block;width: 50px;height: 2px;background: #f00;position: absolute;bottom: -30px;left: 50%;margin-left: -25px;} .screen-2__subheading {position: absolute;top: 192px;width: 100%;font-size: 18px;line-height: 25px;font-weight: 100;color: #000;} .screen-2__pic {position: absolute;top: 280px;left: 50%;margin-left: -375px;width: 750px;height: 360px;background: url("../images/sc2.png") no-repeat left top;} .screen-2__pic-i-1 {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url("../images/sc2-1.png") no-repeat center top;} .screen-2__pic-i-2 {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url("../images/sc2-2.png") no-repeat 355px 56px;} /* screen-3 */ .screen-3 {height: 640px;background: #2b333b;} .screen-3__wrap {width: 1400px;height: 640px;margin: 0 auto;position: relative;} .screen-3__pic {position: absolute;top: 100px;left: 20px;width: 370px;height: 400px;background: url("../images/sc3.png") no-repeat left top;background-size: 100% 100%;} .screen-3__heading {position: absolute;top: 226px;left: 880px;font-size: 36px;color: #fff;} .screen-3__heading:after {content: ' ';display: block;width: 50px;height: 2px;background: #f00;position: absolute;left: 0;bottom: -30px;} .screen-3__subheading {position: absolute;top: 320px;left: 880px;font-size: 16px;line-height: 25px;font-weight: 100;color: #fff;} .screen-3__type {position: absolute;left: 880px;bottom: 50px;} .screen-3__type-item {box-sizing: border-box;width: 60px;height: 60px;line-height: 60px;text-align: center;border-radius: 50%;border: 2px solid #fff;display: inline-block;margin-left: 40px;font-size: 14px;} .screen-3__type-item:nth-child(1) {margin-left: 0;border-color: #1f5975;color: #1ca4ff;} .screen-3__type-item:nth-child(1):after .screen-3__type-item:nth-child(1):beofre {border-color: #1f5975;background: #1f5975;color: #1ca4ff;} .screen-3__type-item:nth-child(2), .screen-3__type-item:nth-child(2):after, .screen-3__type-item:nth-child(2):before {border-color: #424d76;color: #4f7df0;} .screen-3__type-item:nth-child(3), .screen-3__type-item:nth-child(3):after, .screen-3__type-item:nth-child(3):before {border-color: #6b4146;color: #dd413b;} .screen-3__type-item:nth-child(4), .screen-3__type-item:nth-child(4):after, .screen-3__type-item:nth-child(4):before {border-color: #29535f;color: #2a9dda;} .screen-3__type-item:nth-child(5), .screen-3__type-item:nth-child(5):before, .screen-3__type-item:nth-child(5):after {border-color: #3e4e40;color: #90b045;} /* screen-4 */ .screen-4 {height: 640px;background: #f3f5f7;} .screen-4__wrap {height: 640px;width: 1200px;margin: 0 auto;position: relative;} .screen-4__heading {position: absolute;top: 88px;font-size: 36px;color: #07111b;text-align: center;width: 100%;} .screen-4__heading:after {content: ' ';display: block;width: 50px;height: 2px;background: #f00;position: absolute;left: 50%;margin-left: -25px;bottom: -30px;} .screen-4__subheading {position: absolute;top: 188px;font-size: 16px;line-height: 25px;font-weight: 100;color: #07111b;text-align: center;width: 100%;} .screen-4__type {margin-left: -60px;position: absolute;top: 288px;} .screen-4__type-item {display: inline-block;width: 160px;height: 120px;margin-left: 140px;position: relative;} .screen-4__type-item:nth-child(1) {background: url("../images/sc4-1.png") no-repeat center top;} .screen-4__type-item:nth-child(2) {background: url("../images/sc4-2.png") no-repeat center top;} .screen-4__type-item:nth-child(3) {background: url("../images/sc4-3.png") no-repeat center top;} .screen-4__type-item:nth-child(4) {background: url("../images/sc4-4.png") no-repeat center top;} .screen-4__type-item-text {position: absolute;text-align: center;bottom: 0;display: block;width: 100%;font-size: 14px;color: #333;} /* screen-5 */ .screen-5 {height: 640px;background: url("../images/sc5.jpg") no-repeat;background-size: cover;} .screen-5__wrap {width: 1200px;height: 640px;margin: 0 auto;position: relative;} .screen-5__pic {position: absolute;left: 50%;margin-left: -100px;top: 100px;width: 200px;height: 200px;background: url("../images/sc5-1.png") no-repeat center top;} .screen-5__heading {position: absolute;top: 360px;font-size: 36px;color: #fff;width: 100%;text-align: center;} .screen-5__heading::after {content: ' ';display: block;width: 50px;height: 2px;background: #fff;position: absolute;left: 50%;margin-left: -25px;bottom: -30px;} .screen-5__subheading {position: absolute;top: 460px;font-size: 16px;line-height: 25px;font-weight: 100;color: #fff;text-align: center;width: 100%;} /* submit-area */ .submit-area {height: 200px;background: #fff;} .submit-area__wrap {width: 1200px;height: 200px;margin: 0 auto;position: relative;} .submit-area-button {position: absolute;display: block;width: 230px;height: 60px;left: 50%;margin-left: -115px;top: 50%;margin-top: -30px;line-height: 60px;border: 1px solid #666;text-align: center;font-size: 18px;color: #666;border-radius: 5px;transition: all .3s ease;} .submit-area-button:hover {color: #f00;box-shadow: 0 0 10px 5px rgba(0, 0, 0, .1);} /* footer */ .footer {height: 100px;background: #000;} .footer__wrap {width: 1200px;margin: 0 auto;text-align: center;position: relative;} .footer__type {text-align: center;position: absolute;top: 30px;width: 100%;} .footer__type-item {margin-left: 30px;font-size: 12px;color: #999;transition: all .3s ease;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;} .footer__type-item:hover {color: #e53e3e;} .footer__copy {font-size: 14px;color: #666;position: absolute;top: 60px;width: 100%;text-align: center;} /* outline */ .outline {position: fixed;padding: 5px 10px;bottom: 120px;right: 0;z-index: 6;background-color: #fff;box-shadow: 0px 4px 12px 0px rgba(7, 17, 27, 0.1);} .outline__item {display: block;width: 40px;height: 30px;line-height: 30px;padding: 5px 0;background: rgb(255, 255, 255);margin: 5px 0px 0px;border-top: 1px solid #eee;text-align: center;color: #93999f;} .outline__item:first-child {border: none;} .outline__item_status_active {color: #ff0000;}

animation.css

/* screen-1 */ .screen-1__heading { transition: all 1s ease; } .screen-1__heading_animate_init { opacity: 0; transform: translate(0, 100%); } .screen-1__heading__animate_done { opacity: 1; transform: translate(0, 0); } .screen-1__subheading { transition: all 1s ease; } .screen-1__subheading_animate_init { opacity: 0; transform: translate(0, -100%); } .screen-1__heading__animate_done {} /* screen-2 */ .screen-2__heading { transition: all 1s ease; } .screen-2__heading_animate_init { opacity: 0; transform: translate(0, 100%); } .screen-2__heading_animate_done { opacity: 1; transform: translate(0, 0); } .screen-2__subheading { transition: all 1s ease .3s; } .screen-2__subheading_animate_init { opacity: 0; transform: translate(0, 100%); } .screen-2__subheading_animate_done { opacity: 1; transform: translate(0, 0); } .screen-2__pic-i-1 { transition: all 1s ease .2s; } .screen-2__pic-i-1_animate_init { opacity: 0; transform: translate(0, 100%); } .screen-2__pic-i-1_animate_done { opacity: 1; transform: translate(0, 0); } .screen-2__pic-i-2 { opacity: 0; } .screen-2__pic-i-2_animate_init { opacity: 0; transform: translate(0, 100%); } .screen-2__pic-i-2_animate_done { animation: screenPicDone .3s ease 1s forwards; } .screen-3__type-item { position: relative; } .screen-3__type-item:after, .screen-3__type-item:before { content: " "; position: absolute; display: block; left: -3px; top: -3px; width: 58px; height: 58px; line-height: 60px; border-radius: 50%; border: 2px solid #1f5975; z-index: -1; } .screen-3__type-item:after { animation: breathe 1s ease 1s infinite; } .screen-3__type-item:before { animation: breathe 1s ease 2s infinite; } @-webkit-keyframes breathe { 0% { transform: scale(.95); } 100% { transform: scale(1.03); } } /* 自定义动画形式位置大小 */ @-webkit-keyframes screenPicDone { 0% { opacity: 1; transform: translate(0, 50%); } 30% { opacity: 1; transform: translate(0, -10%); } 60% { opacity: 1; transform: translate(0, 10%); } 100% { opacity: 1; transform: translate(0, 0); } } /* screen-3 */ .screen-3__pic { transition: all 1s ease; } .screen-3__pic_animate_init { opacity: 0; transform: translate(0, 100%) scale(.5); } .screen-3__pic_animate_done { opacity: 1; transform: translate(0, 0) scale(1); } .screen-3__heading { transition: all 1s ease; } .screen-3__heading_animate_init { opacity: 0; transform: translate(0, 100%); } .screen-3__heading_animate_done { opacity: 1; transform: translate(0, 0); } .screen-3__subheading { transition: all 1s ease .3s; } .screen-3__subheading_animate_init { opacity: 0; transform: translate(0, 100%); } .screen-3__subheading_animate_done { opacity: 1; transform: translate(0, 0); } .screen-3__type { opacity: 0; } .screen-3__type_animate_init { opacity: 0; } .screen-3__type_animate_done { animation: screenPicDone .3s ease 1s forwards; } /*.screen-3__type-item { position: relative; animation: breathe 3s ease 1s infinite; }*/ /* 自定义动画形式位置大小 */ /* screen-4 */ .screen-4__heading { transition: all 1s ease; } .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 { transition: all 1s ease .3s; } .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-2, .screen-4__type-item-i-3, .screen-4__type-item-i-4 { transition: all 1s ease .6s; } .screen-4__type {} .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; transform: translate(0, 100%) scale(.1); } .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_home { opacity: 1; transform: translate(0, 0) scale(1); } /* screenw-5 */ .screen-5__heading { transition: all 1s ease; } .screen-5__heading_animate_init { opacity: 0; transform: translate(0, 100%); } .screen-5__heading_animate_dome { opacity: 1; transform: translate(0, 0); } .screen-5__subheading { transition: all 1s ease .3s; } .screen-5__subheading_animate_init { opacity: 0; transform: translate(0, 100%); } .screen-5__subheading_animate_done { opacity: 1; transform: translate(0, 0); } .screen-5__pic { transition: all 1s ease; } .screen-5__pic_animate_init { transform: translate(0, 0) scale(.3); } .screen-5__pic_animate_done { opacity: 1; transform: translate(0, 0) scale(1); } /* outline */ .outline { opacity: 0; transition: all 1s ease; transform: translate(100%, 0); } .outline_status_in { opacity: 1; transform: translate(0, 0); } /*header */ .header_status_black { background: rgba(0, 0, 0, .8); } .header_status_black .header__logo { color: #fff; } .header_status_black .header__nav-item { color: #fff; } /* header__nav-tip */ .header__nav-tip { position: absolute; width: 55px; height: 2px; background: #f00; left: 0; bottom: 0; transition: all .5s ease; }

script.js

// 根据class 获取元素 var getElement = function(selector) { return document.querySelector(selector); } // 根据class 获取所有有次class 的元素 var getAllElement = function(selector) { return document.querySelectorAll(selector); } // 获取元素class var getClass = function(element) { return element.getAttribute("class"); } // 给元素设置class var setClass = function(element, cls) { return element.setAttribute("class", cls); } // 给元素添加样式 var addClass = function(element, cls) { var baseCls = getClass(element); if (baseCls.indexOf(cls) === -1) { setClass(element, baseCls + " " + cls); } } // 元素删除指定样式 var delClass = function(element, cls) { var baseCls = getClass(element); if (baseCls.indexOf(cls) != -1) { setClass(element, baseCls.split(cls).join(' ').replace(/\s+/g, ' ')); } } // screenAnimateElements var screenAnimateElements = { '.screen-1': [ '.screen-1__heading', '.screen-1__subheading', ], '.screen-2': [ '.screen-2__heading', '.screen-2__subheading', '.screen-2__pic-i-1', '.screen-2__pic-i-2', ], '.screen-3': [ '.screen-3__pic', '.screen-3__heading', '.screen-3__subheading', '.screen-3__type', ], '.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__pic', ] } // 初始化样式 var setScreenAnimateInit = function(screenCls) { //对当前元素数组进行遍历 var AnimateElements = screenAnimateElements[screenCls]; for (var i = 0; i < AnimateElements.length; i++) { // 获取当前元素的DOM结构 var element = getElement(AnimateElements[i]); // 获取当前元素的class var baseCls = getClass(element); // 给元素添加class element.setAttribute("class", baseCls + " " + baseCls + "_animate_init"); } } // 播放屏幕元素动画 var playScreenAnimateDone = function(screenCls) { var AnimateElements = screenAnimateElements[screenCls]; for (var i = 0; i < AnimateElements.length; i++) { // 获取当前元素的DOM结构 var element = getElement(AnimateElements[i]); // 获取当前元素的class var baseCls = getClass(element); // 给元素的样式设置为 Done element.setAttribute("class", baseCls.replace("_animate_init", "_animate_done")); } } // 第二步页面滚动到那个屏幕 那个屏幕就播放动画 window.onscroll = function() { var top = document.body.scrollTop; if (top > 80) { playScreenAnimateDone(".screen-1"); addClass(getElement(".header"), "header_status_black") addClass(getElement(".outline"), "outline_status_in"); } else { delClass(getElement(".header"), "header_status_black"); delClass(getElement(".outline"), "outline_status_in"); navTip.style.left = 0 * 88 + "px"; } if (top > 640 * 1 - 150) { playScreenAnimateDone(".screen-2"); navTip.style.left = 1 * 88 + "px"; } if (top > 640 * 2 - 100) { playScreenAnimateDone(".screen-3"); navTip.style.left = 2 * 88 + "px"; } if (top > 640 * 3 - 150) { playScreenAnimateDone(".screen-4"); navTip.style.left = 3 * 88 + "px"; } if (top > 640 * 4 - 250) { playScreenAnimateDone(".screen-5"); navTip.style.left = 4 * 88 + "px"; } } // 滑动门特效 var navTip = getElement(".header__nav-tip"); var header = getElement(".header"); var navItems = getAllElement(".header__nav-item"); var outlines = getAllElement(".outline__item"); // 定义nav 指针变量 var nav_index = 0; for (var i = 0; i < navItems.length - 1; i++) { navItems[i].setAttribute("data-index", i); navActiveClass = getClass(navItems[i]); // 鼠标划伤导航栏的特效 navItems[i].onmouseover = function() { nav_index = this.getAttribute("data-index"); navTip.style.left = nav_index * 88 + "px"; return false; } // 删除选中状态的class navItems[i].onclick = function() { for (var i = 0; i < navItems.length; i++) { delClass(navItems[i], "header__nav-item-active"); } addClass(this, "header__nav-item-active"); var nav_index = this.getAttribute("data-index"); document.body.scrollTop = nav_index * 600; } // 离开恢复当前选中的屏幕 navItems[i].onmouseout = function() { for (var i = 0; i < navItems.length; i++) { if (getClass(navItems[i]).indexOf("header__nav-item-active") != -1) { navTip.style.left = i * 88 + "px"; } } } } // console.log(outlines); // 点击右侧导航大纲是发生页面滚动 for (var i = 0; i < outlines.length; i++) { outlines[i].setAttribute("data-index", i); outlines[i].onclick = function() { for (var i = 0; i < outlines.length; i++) { delClass(navItems[i], "outline__item-active"); } addClass(this, "outline__item-active"); console.log(this); nav_index = this.getAttribute("data-index"); console.log(nav_index); document.body.scrollTop = nav_index * 640; } } // 点击获取更多按钮发成的click事件 getElement(".submit-area-button").onclick = function() { document.body.scrollTop = 0; } window.onload = function() { for (k in screenAnimateElements) { if (k === ".screen-1") { continue; } setScreenAnimateInit(k); } } setTimeout(function() { playScreenAnimateDone(".screen-1"); }, 300);
转载请注明原文地址: https://www.6miu.com/read-58307.html

技术

最新回复(0)