按照國際慣例先放圖
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.uj5u.com/qiye/158700.html
標籤：JavaScript
下一篇：【uuid】- 唯一標識