一阶段项目总结

1.实用CSS属性

1 background-color: rgba(34,38,44,0.3) 背景半透明化

1 background-image: url(../img/W7DDWUACKJ1A1517317609671.jpg);
2 background-position: -260px -0px;//图片位置
3 background-size: 119.5% 400px ;//图片大小
4 background-repeat: no-repeat;//图片重复

1 transition: all 1.2s; //高宽同时放大，1.2秒内执行完毕
2 transform：scale(1.1);图片放大 数字为放大倍数
3 上面两条属性需要结合使用

1 overflow:hidden;//隐藏超出元素范围的内容
2 display: none;//隐藏元素
3 display: block;//转为块级元素
4 这三条属性结合使用可以实现元素的隐藏与再现，非常适合用来做交互式导航等内容

2.JS效果思路

利用数字来判断点击次数：

 1 var i = 1;
 2 var j = 2;
 3 var a = document.getElementById("game");
 4 var b = document.getElementById("gamei");
 5 var c = document.getElementById("story");
 6 var d = document.getElementById("storyi");
 7 var hg = document.getElementById("hg");
 8 var hs = document.getElementById("hs"); 
 9 function sel1(){
10         if(i%2==1){
11             a.style.color="white";
12             b.style.right="48px";
13             hg.style.display="block";
14         } 
15         if(i%2==0){
16             hg.style.display="none";
17             a.style.color="#f4d04d";
18             b.style.right="0px";
19         } 
20         if(hs.style.display=="block"){ //检测另一个隐藏元素是否显示，如果显示则令其隐藏，使得两个元素不会同时显示
21             hs.style.display="none";
22             c.style.color="#f4d04d";
23             d.style.right="0px";
24         } 
25         j=2;  //可使另外一个元素处于第一次点击的状态
26         i++;
27 }
28 function sel2(){
29 
30         if(j%2==0){
31             c.style.color="white";
32             d.style.right="48px";
33             hs.style.display="block";
34         }
35         if(j%2==1){
36             hs.style.display="none";
37             c.style.color="#f4d04d";
38             d.style.right="0px";
39         } 
40         if(hg.style.display=="block"){
41              hg.style.display="none";
42              a.style.color="#f4d04d";
43              b.style.right="0px";
44         }
45         i=1;
46         j++;
47 }

判断侧面滑动栏滑动距离来改变导航位置：

 1 var na = document.getElementById("mnav"); 
 2 function mnav(){
 3                 var tp = document.documentElement.scrollTop;
 4                 if(tp>0){
 5                     na.style.top="0px";
 6                 }
 7                 if(tp==0){
 8                     na.style.top="41px";
 9                 }
10                 
11             }
12 var timer = setInterval(
13         function(){
14             mnav();
15         },300);  //实时监测滑动栏滑动距离

PS:上面方法的改进版

 1 window.onscroll=function(){
 2     function mnav(){
 3     var h = window.scrollY; //获取滚动条Y轴即垂直滚动条滚动距离
 4     if(tp>0){
 5         na.style.top="0px";
 6     }
 7     if(tp==0){
 8         na.style.top="41px";
 9         }
10                 
11     }
12 }
13  window.scrollY 优势在于可做到实时检测，满足条件只执行一次函数，避免了使用定时器占用资源，以及函数被错误的重复调用的问题。
缺点在于，只有页面滚动时才会调用函数，如果页面一直不滚动，则函数一直不调用，而document.documentElement.scrollTop
配合定时器，可实现实时监测滚动条的距离。

均分图片移动距离实现图片滚动动画：

 1 var nico1 = document.getElementById("nico1");
 2 var nico2 = document.getElementById("nico2");
 3 var nico3 = document.getElementById("nico3");
 4 
 5 var m = 0;
 6 var n = -25;
 7 var timer1;
 8 var timer2;
 9 function mover1(){
10         function mv1(){
11             m=m-2.5;//距离均分，多次移动
12             nico1.style.top = m+"px";
13             if(m==-25){
14                 clearInterval(timer1);
15                 return m = 0;  //数值还原，否则下一次移动会按照m=-25来进行计算
16             }
17         }
18         timer1 = setInterval(function(){mv1();},20);//连续调用函数
19 }
20 function mout1(){
21         function mo1(){
22             n=n+2.5;
23             nico1.style.top = n+"px";
24             if(n==0){
25                 clearInterval(timer2);
26                 return n = -25;
27             }
28         }
29         timer2 = setInterval(function(){mo1();},20);
30 }

PS:<a href="javascript:void(0)"></a> 避免点击链接后，自动跳到页面顶部。

3.总结

position:relative 元素原来占用位置依旧存在，慎用。

注意细节设计，一些小小的效果实现能显著提高网页的实用性。

多做注释，提高代码可读性，也方便其他人接手自己当前的项目。

JS变量、CSS选择器命名要规范，提高可读性，也能防止代码量提高后造成的命名混乱问题。

CSS选择器可多采用分组设计，具有同样属性的选择器分为一组，不同的属性再单独定义，可以减少代码量。

如果一个网页的顶部导航和底部信息等样式相同，则可以先设计好模板，再填写内容，可大大提高网页制作效率。