4.26笔记

移动产生絮条动画

利用了鼠标的移动事件以及元素的坐标属性以及元素的显示与隐藏。

 window.onload = function(){

        //所有的盒子都获取到

        var box = document.getElementsByTagName("div");

            //给文档绑定拖动事件

            document.onmousemove = function(event){

                var j= 0;

                //给一个计时器

                var timer = setInterval(function(){

                    j++;

                    //20毫秒显示一个box,然后随着光标移动（给盒子定位）

                    //盒子的left和top值相当于光标的横纵坐标

                    box[j].style.display = "block";

                    box[j].style.left = (event.clientX-box[j].offsetWidth/2)+"px";

                    box[j].style.top = (event.clientY-box[j].offsetHeight/2)+"px";

                    if(j==box[j].length){

                        clearInterval(timer);

                    }

                },50)

            }

    }

 

图片跟着鼠标飞动画

利用了鼠标的移动事件以及元素的坐标属性。

var imgObj = document.querySelector("#imgObj");

  // 鼠标移动事件

  document.onmousemove = function (event) {

    var event = event || window.event;

    var leftObj = event.clientX - imgObj.clientWidth / 2;

    var topObj = event.clientY - imgObj.clientHeight / 2

    imgObj.style.left = leftObj + "px";

    imgObj.style.top = topObj + "px";

  }

 

返回顶部

代码：

<script>

  var img1 = document.getElementById("img1");

  window.onscroll = function () {

    // 浏览器的scrollTop

    var top = document.body.scrollTop || document.documentElement.scrollTop;

    console.log(top);

    // 文档的可视高度

    if (top >= document.documentElement.clientHeight) {

      img1.style.display = "block";

    } else {

      img1.style.display = "none";

    }

  }

  img1.onclick = function () {

    var timer = setInterval(function () {

      var step = 100;

      document.body.scrollTop -= step;

      document.documentElement.scrollTop -= step;

      if (document.body.scrollTop || document.documentElement.scrollTop <= 0) {

        clearInterval(timer);

      }

    }, 50)

  }

</script>