页面总结（实验室暑假第一个任务）

顶部导航栏部分

第一阶段

没有加上滚动条滚动效果，直接进行链接跳转：

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[i].className="text1";

           }

           target.parentNode.className="text";

    }

   });

2）用DOM ，使用for循环

代码：

 var shunxu=document.getElementsByTagName("li");

 for(var i=0;i

       shunxu[i].onclick=function() {

       for(var j=0;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）     

https://www.jianshu.com/p/dc2f644adc23

introduce部分

    （难点在于打印效果的实现，以及图片周围的扩散变换；）

打印效果：

https://www.jianshu.com/p/5a37bf03720e

图片的扩散（用动画实现（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

                if(test[i].className == "subj") {

                    test[i].remove();

                }

            }

        }

    }

    if (target.className == "shuru2") {

        if(d1.length==0) {

            for(var i=0;i

                if(test[i].className == "cont") {

                    test[i].remove();

                }

            }

        }

    }

}

问题2（小问题） 发送邮件

mailto属性 （email链接）

代码:(这里我只执行了发邮件给[email protected]；以及文件的标题kuang1；以及抄送发邮件给[email protected]；以及邮件的内容：kuang2)；

var email = "mailto:[email protected]?subject="+kuang1+"[email protected]&body="+kuang2;

mailto

语法：    (空格是%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;

}