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:;
padding:;
}
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:;
padding:;
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:;
}
.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:;
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:;
top: 200px;
background-size: 90%;
}
.screen_3_feature{
width:400px;
position:absolute;
top:380px;
left:;
}
.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:;
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:;
left:;
margin-left:47px;
transition:all 1s;
}
animate.css
/*第一屏*/
/*screen_1_heading*/
.screen_1_heading{
transition: all 1s;
}
.screen_1_heading_animate_init{
opacity:;
transform:translate(0,100%);
}
.screen_1_heading_animate_done{
opacity:;
transform:translate(0,0);
}
/*screen_1_phone*/
.screen_1_phone{
transition: all 1s;
}
.screen_1_phone_animate_init{
opacity:;
transform:translate(0,-100%);
}
.screen_1_phone_animate_done{
opacity:;
transform:translate(0,0);
}
/*screen_1_shadow*/
.screen_1_shadow{
transition: all 1s;
}
.screen_1_shadow_animate_init{
opacity:;
transform:translate(0,-100%);
}
.screen_1_shadow_animate_done{
opacity:;
transform:translate(0,0);
} /*第二屏*/
/*screen_2_title*/
.screen_2_title{
transition: all 1s;
}
.screen_2_title_animate_init{
opacity:;
transform: translate(0,-100%);
}
.screen_2_title_animate_done{
opacity:;
transform: translate(0,0);
}
/*screen_2_subtitle*/
.screen_2_subtitle{
transition: all 1s;
}
.screen_2_subtitle_animate_init{
opacity:;
transform: translate(0,100%);
}
.screen_2_subtitle_animate_done{
opacity:;
transform: translate(0,0);
}
/*screen_2_phone*/
.screen_2_phone{
transition: all 1s;
}
.screen_2_phone_animate_init{
opacity:;
transform: translate(0,50%);
}
.screen_2_phone_animate_done{
opacity:;
transform: translate(0,0);
}
/*screen_2_phone_point*/
.screen_2_phone_point{
transition: all 1s 1s;
}
.screen_2_phone_point1_animate_init{
opacity:;
transform: translate(-100%,0);
}
.screen_2_phone_point2_animate_init,
.screen_2_phone_point3_animate_init{
opacity:;
transform: translate(100%,0);
}
.screen_2_phone_point_animate_done{
opacity:;
transform: translate(0,0);
} /*第三屏*/
/*screen_3_title*/
.screen_3_title{
transition: all 1s;
}
.screen_3_title_animate_init{
opacity:;
transform: translate(0,-100%);
}
.screen_3_title_animate_done{
opacity:;
transform: translate(0,0);
}
/*screen_3_subtitle*/
.screen_3_subtitle{
transition: all 1s;
}
.screen_3_subtitle_animate_init{
opacity:;
transform: translate(0,100%);
}
.screen_3_subtitle_animate_done{
opacity:;
transform: translate(0,0);
}
/*screen_3_phone*/
.screen_3_phone{
transition: all 1s;
}
.screen_3_phone_animate_init{
opacity:;
transform: translate(0,100%);
}
.screen_3_phone_animate_done{
opacity:;
transform: translate(0,0);
}
/*screen_3_feature*/
.screen_3_feature{
transition: all 1s;
}
.screen_3_feature_animate_init{
opacity:;
transform: scale(.5);
}
.screen_3_feature_animate_done{
opacity:;
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:;
transform: translate(0,-100%);
}
.screen_4_heading_animate_done{
opacity:;
transform: translate(0,0);
}
/*screen_4_subheading*/
.screen_4_subheading{
transition: all 1s;
}
.screen_4_subheading_animate_init{
opacity:;
transform: translate(0,100%);
}
.screen_4_subheading_animate_done{
opacity:;
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:;
}
.screen_4_type_item_i_1_animate_done{
opacity:;
}
/*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:;
}
.screen_4_type_item_i_2_animate_done{
opacity:;
}
/*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:;
}
.screen_4_type_item_i_3_animate_done{
opacity:;
}
/*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:;
}
.screen_4_type_item_i_4_animate_done{
opacity:;
} /*第五屏*/
/*screen_5_heading*/
.screen_5_heading{
transition: all 1s;
}
.screen_5_heading_animate_init{
opacity:;
transform: translate(0,-100%);
}
.screen_5_heading_animate_done{
opacity:;
transform: translate(0,0);
}
/*screen_5_subheading*/
.screen_5_subheading{
transition: all 1s;
}
.screen_5_subheading_animate_init{
opacity:;
transform: translate(0,100%);
}
.screen_5_subheading_animate_done{
opacity:;
transform: translate(0,0);
}
/*screen_5_bg*/
.screen_5_bg{
transition: all 1s;
}
.screen_5_bg_animate_init{
opacity:;
transform: translate(0,100%);
}
.screen_5_bg_animate_done{
opacity:;
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:;
}
.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宣传页项目-综合实战的更多相关文章
- 08Vue.js快速入门-Vue综合实战项目
8.1. 前置知识学习 npm 学习 官方文档 推荐资料 npm入门 npm介绍 需要了解的知识点 package.json 文件相关配置选项 npm 本地安装.全局安装.本地开发安装等区别及相关命令 ...
- Node.js Express+Mongodb 项目实战
Node.js Express+Mongodb 项目实战 这是一个简单的商品管理系统的小项目,包含的功能还算挺全的,项目涵盖了登录.注册,图片上传以及对商品进行增.删.查.改等操作,对于新手来说是个很 ...
- 微信小程序项目开发实战：用WePY、mpvue、Taro打造高效的小程序》（笔记4）支持React.js语法的Taro框架
Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...
- Java web项目综合练习（Estore）
Java web项目综合练习(Estore) 复习day18: ajax代码的书写步骤 2)json格式文本,转js对象的方法是那个 项目开发流程介绍 这里学习的JavaWEB项目实战,主要是把前面学 ...
- 【前端】Vue.js经典开源项目汇总
Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...
- Vue.js经典开源项目汇总
Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...
- vue2.0 构建单页应用最佳实战
vue2.0 构建单页应用最佳实战 前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,vue-resource,vuex 1.使用 vue-cli 创建项目2.使 ...
- Vue.js经典开源项目汇总-前端参考资源
Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（五）
系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...
随机推荐
- Flutter开发之Widget布局和页面导航
一.水平布局Row Row控件可以分为非灵活排列和灵活排列两种,灵活的可以在外边加入Expanded使用 两者混用: import 'package:flutter/material.dart'; v ...
- MySQL关系型数据库基础操作
MySQL基础 一.MySQL常用数据类型 1.常用数值类型(INT,DOUBLE,FLOAT) ① int 或者 integer 类型: 大小(字节):4字节: 范围: (有符号: -2147483 ...
- 加密算法极先锋之MD5算法
在开发过程中,避免不了要涉及到数据加密,比如用户账号密码的加密,用户敏感数据的加密,涉及到的加密算法种类繁多,作为拿来主义的开发者时间精力有限,能够清楚其中主流的加密算法和用途,就已经足够了. 主要的 ...
- ClientAbortException ：客户端异常终止
ClientAbortException :客户端异常终止 java.io.IOException: 你的主机中的软件中止了一个已建立的连接. 罪魁祸首: <img src="chec ...
- Java synchronized 关键字详解
Java synchronized 关键字详解 前置技能点 进程和线程的概念 线程创建方式 线程的状态状态转换 线程安全的概念 synchronized 关键字的几种用法 修饰非静态成员方法 sync ...
- python3-cookbook笔记：第十章 模块与包
python3-cookbook中每个小节以问题.解决方案和讨论三个部分探讨了Python3在某类问题中的最优解决方式,或者说是探讨Python3本身的数据结构.函数.类等特性在某类问题上如何更好地使 ...
- R12客户表结构分析
客户表/联系人/PARTY关联 HZ_PARTIES 客户账户表 HZ_CUST_ACCOUNTS 例子: select hp.party_number --客户注册标识 ...
- std::sort为什么保证严格弱序？
这个问题是面试腾讯光子的时候面试官提的,当时的问题是:sort自定义comp函数能用>=吗?当时的我想comp函数只要函数签名是对的应该就没问题吧,于是答了可以.面试结束后总感觉哪里不对,耿耿于 ...
- Python+PyQT5的子线程更新UI界面的实例《新手必学》
今天小编就为大家分享一篇Python+PyQT5的子线程更新UI界面的实例,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧子线程里是不能更新UI界面的,在移动端方面.Android的U ...
- Educational Codeforces Round 32 E 二分
题意:从数组中选几个(任意),使他们的和modm的值最大 题解:我一开始是直接暴力写,然后就会t 其实这题可以用二分的方法写,一半数组的值用来遍历,一般数组的值用来查询. 二分查询就能把时间继续缩短 ...