javaScript动画3 事件对象event onmousemove

事件对象的获取(event的获取) 

var event = event || window.event;(主要用这种)

screenX、pageX和clientX的区别

PageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。（页面）
ScreenY/screenX: 鼠标位于屏幕的上方和左侧的距离。（屏幕）
ClientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）

pageY/X兼容写法

pageY/pageX=event.clientY/clientX+scroll().top/scroll().left

新事件（onmousemove）

只要鼠标在绑定该事件的事件源上移动，哪怕1像素，也会触动这个事件。（这个事件可以直接或者间接的替代定时器）

 

公用js

  1 //缓动动画封装
  2 function animate(ele,target) {
  3     clearInterval(ele.timer);
  4     ele.timer = setInterval(function () {
  5         var step = (target-ele.offsetTop)/10;
  6         step = step>0?Math.ceil(step):Math.floor(step);
  7         ele.style.top = ele.offsetTop + step + "px";
  8         console.log(1);
  9         if(Math.abs(target-ele.offsetTop)<Math.abs(step)){
 10             ele.style.top = target + "px";
 11             clearInterval(ele.timer);
 12         }
 13     },25);
 14 }
 15 /**
 16  * Created by andy on 2015/12/8.
 17  */
 18 function scroll() {  // 开始封装自己的scrollTop
 19     if(window.pageYOffset != null) {  // ie9+ 高版本浏览器
 20         // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
 21         return {
 22             left: window.pageXOffset,
 23             top: window.pageYOffset
 24         }
 25     }
 26     else if(document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明DTD
 27         return {
 28             left: document.documentElement.scrollLeft,
 29             top: document.documentElement.scrollTop
 30         }
 31     }
 32     return {   // 未声明 DTD
 33         left: document.body.scrollLeft,
 34         top: document.body.scrollTop
 35     }
 36 }
 37 /**
 38  * Created by Lenovo on 2016/9/2.
 39  */
 40 /**
 41  * 通过传递不同的参数获取不同的元素
 42  * @param str
 43  * @returns {*}
 44  */
 45 function $(str){
 46     var str1 = str.charAt(0);
 47     if(str1==="#"){
 48         return document.getElementById(str.slice(1));
 49     }else if(str1 === "."){
 50         return document.getElementsByClassName(str.slice(1));
 51     }else{
 52         return document.getElementsByTagName(str);
 53     }
 54 }
 55 
 56 /**
 57  * 功能：给定元素查找他的第一个元素子节点，并返回
 58  * @param ele
 59  * @returns {Element|*|Node}
 60  */
 61 function getFirstNode(ele){
 62     var node = ele.firstElementChild || ele.firstChild;
 63     return node;
 64 }
 65 
 66 /**
 67  * 功能：给定元素查找他的最后一个元素子节点，并返回
 68  * @param ele
 69  * @returns {Element|*|Node}
 70  */
 71 function getLastNode(ele){
 72     return ele.lastElementChild || ele.lastChild;
 73 }
 74 
 75 /**
 76  * 功能：给定元素查找他的下一个元素兄弟节点，并返回
 77  * @param ele
 78  * @returns {Element|*|Node}
 79  */
 80 function getNextNode(ele){
 81     return ele.nextElementSibling || ele.nextSibling;
 82 }
 83 
 84 /**
 85  * 功能：给定元素查找他的上一个兄弟元素节点，并返回
 86  * @param ele
 87  * @returns {Element|*|Node}
 88  */
 89 function getPrevNode(ele){
 90     return ele.previousElementSibling || ele.previousSibling;
 91 }
 92 
 93 /**
 94  * 功能：给定元素和索引值查找指定索引值的兄弟元素节点，并返回
 95  * @param ele 元素节点
 96  * @param index 索引值
 97  * @returns {*|HTMLElement}
 98  */
 99 function getEleOfIndex(ele,index){
100     return ele.parentNode.children[index];
101 }
102 
103 /**
104  * 功能：给定元素查找他的所有兄弟元素，并返回数组
105  * @param ele
106  * @returns {Array}
107  */
108 function getAllSiblings(ele){
109     //定义一个新数组，装所有的兄弟元素，将来返回
110     var newArr = [];
111     var arr = ele.parentNode.children;
112     for(var i=0;i<arr.length;i++){
113         //判断，如果不是传递过来的元素本身，那么添加到新数组中。
114         if(arr[i]!==ele){
115             newArr.push(arr[i]);
116         }
117     }
118     return newArr;
119 }

animate.js