JSAPI 05.高级动画(一)

高级动画(一)

1.图片跟着鼠标飞动画

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

 

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";

  }

2.移动产生絮条动画

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

 

 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)

            }

    }

3.tab切换动画