顶部导航栏部分
第一阶段
没有加上滚动条滚动效果，直接进行链接跳转：
1）用事件委托的方法
https://www.jianshu.com/p/ebc940bec52b
代码：
document.addEventListener("click",function(event){
var target=event.target;
if (target.nodeName=="LI") {
var he = target.parentNode.parentNode.childNodes;
for (var i=0; i<he.length; i++){
he[i].className="text1";
}
target.parentNode.className="text";
}
});
2）用DOM ，使用for循环
代码：
var shunxu=document.getElementsByTagName("li");
for(var i=0;i<shunxu.length;i++) {
shunxu[i].onclick=function() {
for(var j=0;j<shunxu.length;j++) {
shunxu[j].className="text1";
}
this.className="text";
}
}
3）极其笨拙的方法，但方便理解
代码：
function bottom1() {
var di=document.getElementById("one");
var other1=document.getElementById("three");
var other2=document.getElementById("two");
di.style="border-bottom:5px solid white";
other1.style="border-bottom:0px";
other2.style="border-bottom:0px";
}
function bottom2() {
var di=document.getElementById("two");
var other1=document.getElementById("three");
var other2=document.getElementById("one");
di.style="border-bottom:5px solid white";
other1.style="border-bottom:0px";
other2.style="border-bottom:0px";
}
function bottom3() {
var di=document.getElementById("three");
var other1=document.getElementById("two");
var other2=document.getElementById("one");
di.style="border-bottom:5px solid white";
other1.style="border-bottom:0px";
other2.style="border-bottom:0px";
}
第二阶段
对于滚动条的总结：（用了js）
introduce部分
（难点在于打印效果的实现，以及图片周围的扩散变换；）
打印效果：
图片的扩散（用动画实现（animation））
给两个元素定位成一样的，后面的元素会覆盖前面的元素，再给被覆盖的元素添加动画即可；（动画代码如下：）
@keyframes move {
20% {
transform: scale(1.1);
opacity: 0.8;
}
40% {
transform: scale(1.2);
opacity: 0.6;
}
60% {
transform: scale(1.3);
opacity: 0.4;
}
80% {
transform: scale(1.4);
opacity: 0.1;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
protfolio部分
难点在于鼠标悬停 动画如何从两边向中间延伸；（动画）
我的方法：
将一个大的div分成两个小部分；每个部分采用一个动画；
鼠标没划上去之前 设置opacity:0；悬停设置opacity:1;
定位：上面的定位top: 0 ;下面的定位：bottom:0; 绝对定位；
@keyframes myfirst
{
0% { height: 0px;}
25% { height: 12.5%;}
50% { height: 25%;}
75% { height: 37.5%;}
100% { height: 50%;}
}
contact部分
问题1、难点在于如何使得 在文本框里输入时，框顶部出现标题；当文本框里没有内容时，标题消失（事件委托和DOM结合）
（用了好长时间才搞定的~）
思路：
增加部分：首先当它键入其他（除了删除键）键时，会执行增加标题部分的函数，当标题的标签不存在时，会创建标题标签；
删除部分：读取内容；若文本框里的内容为空时，（注意：获取文本框里的内容用的是.value）,则从DOM树中移除标题标签；
代码：
document.onkeydown = function(event){ //增加标题部分；
var kcode = event.keyCode;
if( kcode!= 8) {
var target=event.target;
var test = document.getElementsByTagName("p");
var father = document.getElementById("left");
if (target.className == "shuru1") {
if(test.length == 0){
var b = document.createElement('p');
b.className = "subj";
b.innerHTML= "Subject";
father.appendChild(b);
}
}
if (target.className == "shuru2") {
var test1 = document.getElementsByTagName("small");
if(test1.length == 0){
var c=document.createElement('small');
c.className= "cont";
c.id = "cont";
c.innerHTML = "Content";
father.appendChild(c);
}
}
}
}
document.onkeyup =function(event){ //删除标题
var target=event.target;
var test = document.getElementById("left").childNodes;
var d = document.getElementById("print1").value;
var d1 = document.getElementById("print2").value;
var father = document.getElementById("left");
if (target.className == "shuru1") {
if(d.length==0) {
for(var i=0;i<test.length;i++) {
if(test[i].className == "subj") {
test[i].remove();
}
}
}
}
if (target.className == "shuru2") {
if(d1.length==0) {
for(var i=0;i<test.length;i++) {
if(test[i].className == "cont") {
test[i].remove();
}
}
}
}
}
问题2（小问题） 发送邮件
mailto属性 （email链接）
代码:(这里我只执行了发邮件给leiyx2000@outlook.com；以及文件的标题kuang1；以及抄送发邮件给leiyx2000@outlook.com；以及邮件的内容：kuang2)；
var email = "mailto:leiyx2000@outlook.com?subject="+kuang1+"&cc=leiyx2000@outlook.com&body="+kuang2;
语法：<a href="mailto:发给的邮箱地址?cc=抄送发给的邮箱地址&bcc=暗抄送发给的邮箱地址&subject=标题&body=内容"> (空格是%20,浏览器编码)
3、使用伪类添加一些小元素是很方便的~！ ：after；：before
代码：
.tubiao div:hover .iconfont:after {
content: "";
position: absolute;
width: 20px;
height: 5px;
background-color: #565656;
top: 60px;
left: 16px;
border-radius: 20px;
}
