web项目——门户网页制作过程

1、首先使用一个叫fullPage的jquery插件

      1：可以下载js文件后导入项目：  http://www.jq22.com/jquery-info1124

       2：CDN链接：https://cdn.bootcss.com/fullPage.js/3.0.4/fullpage.css

2、由于是jQuery的插件，所以在使用前需要引入jQuery.js

3、查阅fullPage的官方文档，了解其使用方法

      1：HTML的文档结构中使用section样式

    
第一屏
    
第二屏
    

        
第三屏的第一屏
        
第三屏的第二屏
        
第三屏的第三屏
        
第三屏的第四屏
    
    
第四屏

          2：javascript中调用fullPage函数

$(function(){
    $('#fullpage').fullpage();
});

4、由于门户网站大多由图片组成，因此主要使用图片动画来展示网页，同时为了容易区分不同屏，每个section样式的标签中再添加一个样式sectionA,sectionB...其中在第一屏的结构中，将各自不同的图片当成背景放入div中，只需要设定div的样式以及定位（父级标签相对定位，子标签绝对定位），便可以更轻松地完成布局。

		    

		        

		        

		        

		        

		        

		        

		        	

		        	
web
项目
		        
		    

5、在HTMl文档结构中使用emmet缩写语法可以更快地完成复杂结构的dom树

6、完成HTML文档结构后，编写css文件，首先对css样式进行初始化，如将各级需要使用的标签的margin、padding值设为0，list-style-type设为none。

body,html{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}		
li{
	list-style-type: none;
}

7、对于相对比较简单的页面，可以使用样式选择来进行css文件的编写。(注意：由于使用插件，HTML文档结构可能会改变，需要检查使用插件后的HTML文档结构来对其进行样式编写，如下面css中的div就是fullpage插件添加的，如果不设置，则css样式无法命中标签)

.sectionA>div>.word1{
	width: 1000px;
	height: 6rem;
	background: url(../img/企业项目实践图片/first_word1.png) no-repeat center;
	top: 2.5em;
	position: absolute;
	border-radius: 10rem;
	/*left: 5%;*/
	/*margin-left: -400px;*/
}

8、使用css的元素旋转属性，其中@keyframes命名一个rotate样式，通过对选中的标签使用rotate样式，同时兼容不同浏览器。

@keyframes rotate{ /*旋转圆圈*/
	from{}
	to{
		transform: rotate(360deg);
	}
}
.sectionA>div>.web介绍>.circle{
	animation: rotate 6s infinite linear;
	-moz-animation:rotate 6s infinite linear; /* Firefox */
	-webkit-animation:rotate 6s infinite linear;  /* Safari and Chrome */
	-o-animation:rotate 6s infinite linear;  /* Opera */
}

9、对于展示的li标签，可以使用弹性布局，可以大大方便我们布局操作且适应屏幕。css样式中display设为flex，设置justify-content来调整弹性的属性。

.sectionC>div>.list>ul>li{
	display: flex;
	justify-content: space-between;
	margin: 10px;
}

10、javascript文件的编写

鼠标悬浮在一个标签上，显示不同的图片的效果，首先获取所有的a标签，设置mouseenter事件，现将所有a标签的active样式清除（active样式中包含选中a标签后的颜色变化），然后为当前的a标签添加active样式，表示选中当前标签，对于显示不同的图片，现将所有图片放在li标签上，然后display设为none隐藏，在通过a标签的事件时可以通过设置a标签的自定义属性来关联图片，或者a标签的id值后缀来关联相关的图片，然后将该图片设为可见，实现鼠标悬浮在一个标签上，显示不同的图片的效果。

	    //设置鼠标悬浮在a标签上的事件
			$('.sectionC .list a').mouseenter(function(){
				$('.sectionC .list a').removeClass('active');
				$(this).addClass('active');
				
				//设置中间li图片的切换效果
				for(var i=0;i<6;i++){
					document.getElementById("third_li"+i).style.display="none";//先将全部li标签隐藏,即将上一个mouseenter的li标签隐藏
				}
				//获取当前a标签的id值
				var indexStr=this.id;
				var index=indexStr.charAt(indexStr.length-1);
				
				//设置将a标签对应的子li标签显示
				document.getElementById("third_li"+index).style.display="inline-block";		
			});

11、手风琴效果

在最外层定义一个手风琴大盒子，用来表示外边框，设为相对定位和超出部分隐藏，在大div下嵌套多个小div，设为绝对定位和弹性布局，在每个小div下可以放置不同的图片和文本

/*手风琴大盒子*/
.sectionD>div>.wind{
	width: 800px;
	height: 420px;
	margin: 0 auto;
	padding: 20px;
	position: relative;
	border-radius: 20px;
	overflow: hidden;
}
/*手风琴里的每个div盒子,设置为弹性布局*/
.sectionD>div>.wind>div{
	width: 560px;
	height: 400px;
	position: absolute;
	display: flex;/*默认左右弹性布局*/
	padding: 40px;
	left: 0px;
	border-radius: 20px;
	transition: all 1s;/*过渡效果*/
}

由于小div是绝对定位，因此通过设置left属性可以实现层叠效果，其中初始化的时候根据大div的width除以小div的个数来确定每一个小div的初始left值，实现初始层叠显示。然后为每一个小div设置mouseenter事件，在鼠标移入的时候，将小div显示分为前面的小div的left设置、当前小div的left和width设置，以及后面的小div的left设置（多加个当前小div的width），其中小div的width已定义，所以前面小div的每个marginLeft为大div-需要显示的小div的width，再除以所有div数目-1，由此得到前面每个小div的left值，后面的小div则加个当前小div的值即可，实现手风琴效果。

	    //手风琴效果
	    var windWidth=800;//手风琴div大盒子的宽度
	    var eachDiv=560;//手风琴中每一个小div盒子的宽度
	    var sum=7;//手风琴中有多少个小div
	    //每个小div的间隔
	    var eachLeft=windWidth/sum;
	    
	    //当展示一个div的时候，其余小div只显示一部分
	    var marginLeft=(windWidth-eachDiv)/(sum-1);
	    
	    //给每个手风琴小div设定起始点（即absolute定位中的left值）
	    for(var j=1;j<=sum;j++){
	    	var index="windDiv"+j;
	    	document.getElementById(index).style.left=(j-1)*eachLeft+"px";
	    }
	    
	    //当鼠标移入某一小div时，展开此div，即将前面的div的left设为margin，后面的div的left设为eachDiv＋marginLeft
	    for(var k=1;k<=7;k++){
	    	var index2="windDiv"+k;
	    	document.getElementById(index2).οnmοuseenter=function(event){
//	    		alert(event.target.id);原生写法
//	    		alert($(this).attr('id'));jquery写法
					var currentId=event.target.id.charAt(event.target.id.length-1);//获取当前div的id
					for(var m=1;m<=7;m++){
						var index3="windDiv"+m;
						if(m<=currentId){
							document.getElementById(index3).style.left=(m-1)*marginLeft+"px";			
						}
						else{
							document.getElementById(index3).style.left=((m-1)*marginLeft+eachDiv)+"px";
						}
					}
	    		
	    	};
	    }

12、对于页面中的进场动画，在fullPage中有个回调函数afterLoad，可以根据其index函数来确定是哪个屏，由此实现切换屏时的动画

在css样式中，先将所需标签移出当前屏外，再写一个animation样式将其移回当前屏，在回调函数中将所有屏的animation样式移除，此时所有标签处于屏幕外，当index为当前屏幕时，为该屏下的section样式的标签再添加animation样式，将标签移入屏幕，通过设置过渡效果，实现炫酷的动画效果。

/*第一屏默认状态飞出去*/
/*.sectionA .bg{
	transform: translateY(100%);
}*/
.sectionA .word1{
	transform: translateX(-200%);
}
.sectionA .word2{
	transform: translateX(200%);
}
.sectionA .word3{
	transform: translateX(200%);
}
.sectionA .word4{
	transform: translateX(200%);
}

/*第一屏飞回来入场动画*/
.sectionA.animation .bg{
	transition: all 0.5s;
	transform: none;
}
.sectionA.animation .word1{
	transition: all 0.3s;
	transform: none;
}
.sectionA.animation .word2{
	transition: all 0.4s;
	transform: none;
}
.sectionA.animation .word3{
	transition: all 0.5s;
	transform: none;
}
.sectionA.animation .word4{
	transition: all 0.6s;
	transform: none;
}

	    $('#dowebok').fullpage({
	    	afterLoad:function(anchorLink,index){	    		
	    		//jquery方法
//					$('#dowebok>.section').eq(index-1).removeClass("animation");
//					setTimeout(function(){
//						$('#dowebok>.section').eq(index-1).addClass("animation");
//					},20);

					//javascript方法
					for(var X=1;X<=4;X++){
						document.getElementById("section"+X).classList.remove('animation');//每个div屏移除animation	
					}
					document.getElementById("section"+index).classList.add('animation');//为当前屏添加animation类
					
//					document.getElementsByClassName("section").classList.remove('animation');//将拥有类section的div移除类animation\n
	    	}
	    });

视频教学：http://www.php.cn/course/852.html