HTML页面：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标跟随</title> <style type="text/css"> * { margin: 0; padding: 0; } #box { position: relative; margin: 50px auto; background: green; width: 300px; height: 300px; } #mark { position: absolute; top: 0; left: 0; background: red; width: 100px; height: 100px; } </style> </head> <body> <div id="box"> </div> <script charset="utf-8" type="text/javascript" src="js/utils.js"></script> <script type="text/javascript"> var box = document.getElementById("box"); var boxOff = utils.offset(box); //->鼠标进入的时候创建一个mark盒子，让mark定位到鼠标的下面 function computedMarkPos(mark, e) { e = e || window.event; var curL = e.clientX - boxOff.left + 5; var curT = e.clientY - boxOff.top + 5; utils.css(mark,{ top: curT, left: curL }); } box.onmouseenter = function (e) { var mark = document.createElement("div");//创建createElement mark.id = "mark"; box.appendChild(mark); computedMarkPos(mark, e); /* mark.onmouseover = function (ev) { //阻止 ev = ev || window.event; ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true; };*/ }; box.onmousemove = function (e) { var mark = document.getElementById("mark");//获取getElementById if (mark) { computedMarkPos(mark, e); } }; //-> box.onmouseleave = function(e){ var mark = document.getElementById("mark"); if (mark) { box.removeChild(mark); } }; </script> </body> </html>
里面引进的JS文件：(utils.js)
var utils = (function () { var flag = "getComputedStyle" in window; //->listToArray:把类数组集合转换为数组 function listToArray(likeAry) { if (flag) { return Array.prototype.slice.call(likeAry, 0); } var ary = []; for (var i = 0; i < likeAry.length; i++) { ary[ary.length] = likeAry[i]; } return ary; } //->formatJSON:把JSON格式字符串转换为JSON格式对象 function formatJSON(jsonStr) { return "JSON" in window ? JSON.parse(jsonStr) : eval("(" + jsonStr + ")"); } //->offset:获取页面中任意元素距离BODY的偏移 function offset(curEle) { var disLeft = curEle.offsetLeft, disTop = curEle.offsetTop, par = curEle.offsetParent; while (par) { if (navigator.userAgent.indexOf("MSIE 8") === -1) { disLeft += par.clientLeft; disTop += par.clientTop; } disLeft += par.offsetLeft; disTop += par.offsetTop; par = par.offsetParent; } return {left: disLeft, top: disTop}; } //->win:操作浏览器的盒子模型信息 function win(attr, value) { if (typeof value === "undefined") { return document.documentElement[attr] || document.body[attr]; } document.documentElement[attr] = value; document.body[attr] = value; } //->children:获取所有的元素子节点 function children(curEle, tagName) { var ary = []; if (!flag) { var nodeList = curEle.childNodes; for (var i = 0, len = nodeList.length; i < len; i++) { var curNode = nodeList[i]; curNode.nodeType === 1 ? ary[ary.length] = curNode : null; } nodeList = null; } else { ary = this.listToArray(curEle.children); } if (typeof tagName === "string") { for (var k = 0; k < ary.length; k++) { var curEleNode = ary[k]; if (curEleNode.nodeName.toLowerCase() !== tagName.toLowerCase()) { ary.splice(k, 1); k--; } } } return ary; } //->prev:获取上一个哥哥元素节点 //->首先获取当前元素的上一个哥哥节点,判断是否为元素节点,不是的话基于当前的继续找上面的哥哥节点...一直到找到哥哥元素节点为止,如果没有哥哥元素节点,返回null即可 function prev(curEle) { if (flag) { return curEle.previousElementSibling; } var pre = curEle.previousSibling; while (pre && pre.nodeType !== 1) { pre = pre.previousSibling; } return pre; } //->next:获取下一个弟弟元素节点 function next(curEle) { if (flag) { return curEle.nextElementSibling; } var nex = curEle.nextSibling; while (nex && nex.nodeType !== 1) { nex = nex.nextSibling; } return nex; } //->prevAll:获取所有的哥哥元素节点 function prevAll(curEle) { var ary = []; var pre = this.prev(curEle); while (pre) { ary.unshift(pre); pre = this.prev(pre); } return ary; } //->nextAll:获取所有的弟弟元素节点 function nextAll(curEle) { var ary = []; var nex = this.next(curEle); while (nex) { ary.push(nex); nex = this.next(nex); } return ary; } //->sibling:获取相邻的两个元素节点 function sibling(curEle) { var pre = this.prev(curEle); var nex = this.next(curEle); var ary = []; pre ? ary.push(pre) : null; nex ? ary.push(nex) : null; return ary; } //->siblings:获取所有的兄弟元素节点 function siblings(curEle) { return this.prevAll(curEle).concat(this.nextAll(curEle)); } //->index:获取当前元素的索引 function index(curEle) { return this.prevAll(curEle).length; } //->firstChild:获取第一个元素子节点 function firstChild(curEle) { var chs = this.children(curEle); return chs.length > 0 ? chs[0] : null; } //->lastChild:获取最后一个元素子节点 function lastChild(curEle) { var chs = this.children(curEle); return chs.length > 0 ? chs[chs.length - 1] : null; } //->append:向指定容器的末尾追加元素 function append(newEle, container) { container.appendChild(newEle); } //->prepend:向指定容器的开头追加元素 //->把新的元素添加到容器中第一个子元素节点的前面,如果一个元素子节点都没有,就放在末尾即可 function prepend(newEle, container) { var fir = this.firstChild(container); if (fir) { container.insertBefore(newEle, fir); return; } container.appendChild(newEle); } //->insertBefore:把新元素(newEle)追加到指定元素(oldEle)的前面 function insertBefore(newEle, oldEle) { oldEle.parentNode.insertBefore(newEle, oldEle); } //->insertAfter:把新元素(newEle)追加到指定元素(oldEle)的后面 //->相当于追加到oldEle弟弟元素的前面,如果弟弟不存在,也就是当前元素已经是最后一个了,我们把新的元素放在最末尾即可 function insertAfter(newEle, oldEle) { var nex = this.next(oldEle); if (nex) { oldEle.parentNode.insertBefore(newEle, nex); return; } oldEle.parentNode.appendChild(newEle); } //->hasClass:验证当前元素中是否包含className这个样式类名 function hasClass(curEle, className) { var reg = new RegExp("(^| +)" + className + "( +|$)"); return reg.test(curEle.className); } //->addClass:给元素增加样式类名 function addClass(curEle, className) { var ary = className.replace(/(^ +| +$)/g, "").split(/ +/g); for (var i = 0, len = ary.length; i < len; i++) { var curName = ary[i]; if (!this.hasClass(curEle, curName)) { curEle.className += " " + curName; } } } //->removeClass:给元素移除样式类名 function removeClass(curEle, className) { var ary = className.replace(/(^ +| +$)/g, "").split(/ +/g); for (var i = 0, len = ary.length; i < len; i++) { var curName = ary[i]; if (this.hasClass(curEle, curName)) { var reg = new RegExp("(^| +)" + curName + "( +|$)", "g"); curEle.className = curEle.className.replace(reg, " "); } } } //->getElementsByClass:通过元素的样式类名获取一组元素集合 function getElementsByClass(strClass, context) { context = context || document; if (flag) { return this.listToArray(context.getElementsByClassName(strClass)); } //->IE6~8 var ary = [], strClassAry = strClass.replace(/(^ +| +$)/g, "").split(/ +/g); var nodeList = context.getElementsByTagName("*"); for (var i = 0, len = nodeList.length; i < len; i++) { var curNode = nodeList[i]; var isOk = true; for (var k = 0; k < strClassAry.length; k++) { var reg = new RegExp("(^| +)" + strClassAry[k] + "( +|$)"); if (!reg.test(curNode.className)) { isOk = false; break; } } if (isOk) { ary[ary.length] = curNode; } } return ary; } //->getCss:获取元素的样式值 function getCss(attr) { var val = null, reg = null; if (flag) { val = window.getComputedStyle(this, null)[attr]; } else { if (attr === "opacity") { val = this.currentStyle["filter"]; reg = /^alpha(opacity=(d+(?:.d+)?))$/; val = reg.test(val) ? reg.exec(val)[1] / 100 : 1; } else { val = this.currentStyle[attr]; } } reg = /^(-?d+(.d+)?)(px|pt|em|rem)?$/; return reg.test(val) ? parseFloat(val) : val; } //->setCss:给当前元素的某一个样式属性设置值(增加在行内样式上的) function setCss(attr, value) { if (attr === "float") { this["style"]["cssFloat"] = value; this["style"]["styleFloat"] = value; return; } if (attr === "opacity") { this["style"]["opacity"] = value; this["style"]["filter"] = "alpha(opacity=" + value * 100 + ")"; return; } var reg = /^(width|height|top|bottom|left|right|((margin|padding)(Top|Bottom|Left|Right)?))$/; if (reg.test(attr)) { if (!isNaN(value)) { value += "px"; } } this["style"][attr] = value; } //->setGroupCss:给当前元素批量的设置样式属性值 function setGroupCss(options) { for (var key in options) { if (options.hasOwnProperty(key)) { setCss.call(this, key, options[key]); } } } //->css:此方法实现了获取、单独设置、批量设置元素的样式值 function css(curEle) { var argTwo = arguments[1], ary = Array.prototype.slice.call(arguments, 1); if (typeof argTwo === "string") { if (typeof arguments[2] === "undefined") { return getCss.apply(curEle, ary); } setCss.apply(curEle, ary); } argTwo = argTwo || 0; if (argTwo.toString() === "[object Object]") { setGroupCss.apply(curEle, ary); } } //->把外界需要使用的方法暴露给utils return { win: win, offset: offset, listToArray: listToArray, formatJSON: formatJSON, children: children, prev: prev, next: next, prevAll: prevAll, nextAll: nextAll, sibling: sibling, siblings: siblings, index: index, firstChild: firstChild, lastChild: lastChild, append: append, prepend: prepend, insertBefore: insertBefore, insertAfter: insertAfter, hasClass: hasClass, addClass: addClass, removeClass: removeClass, getElementsByClass: getElementsByClass, css: css } })();
