<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标特效</title>
<script type="text/javascript">
(function (bool) {
//兼容FF一些方法
var html;
window.IE = /MSIE/.test(window.navigator.userAgent);
if (bool) {
html = window.HTMLElement.prototype;
window.__defineGetter__("event", function () {
//兼容Event对象
var o = arguments.callee;
do {
if (o.arguments[0] instanceof Event) return o.arguments[0];
} while (o = o.caller);
return null;
});
}
})(/Firefox/.test(window.navigator.userAgent));
var Class = {
//创建类
create : function () {
return function () {
this.initialize.apply(this, arguments);
};
}
};
var $A = function (a) {
//转换数组
return a ? Array.apply(null, a) : new Array;
};
Object.extend = function (a, b) {
//追加方法
for (var i in b) a[i] = b[i];
return a;
};
Object.extend(Object, {
addEvent : function (a, b, c, d) {
//添加函数
var $ni, $nf;
if (b != "object") { $ni = $nf = b; }
else { $ni = b[0], $nf = b[1]; }
if (a.attachEvent) a.attachEvent($ni, c);
else a.addEventListener($nf.replace(/^on/, ""), c, d || false);
return c;
},
delEvent : function (a, b, c, d) {
//删除函数
var $ni, $nf;
if (b != "object") { $ni = $nf = b; }
else { $ni = b[0], $nf = b[1]; }
if (a.detachEvent) a.detachEvent($ni, c);
else a.removeEventListener($nf.replace(/^on/, ""), c, d || false);
return c;
}
});
Function.prototype.bind = function () {
//绑定事件
var wc = this, a = $A(arguments), o = a.shift();
return function () {
wc.apply(o, a.concat($A(arguments)));
};
};
var CMouse = Class.create();
CMouse.prototype = {
initialize : function (obj) {
//初始化参数
var wc = this;
wc.div = wc.init_div();
wc.click = null; //鼠标按下后记录其坐标
wc.sFunc = Object.addEvent(document, "onmousedown", wc.sMove.bind(wc));
wc.iFunc = wc.eFunc = null;
},
init_div : function () {
//创建DIV,修改样式,并返回
var div = document.createElement("div");
with (div.style) {
position = "absolute";
zIndex = 100;
overflow = "hidden";
display = "none";
width = height = top = left = "0px";
border = "#CCCCCC 1px solid";
backgroundColor = "#F4F4F4";
filter = "alpha(opcaity=50)";
opacity = "0.5";
}
div.innerHTML = " ";
return document.body.appendChild(div);
},
reMouse : function () {
//获取鼠标位置
var e = window.event;
return {
x : document.documentElement.scrollLeft + e.clientX,
y : document.documentElement.scrollTop + e.clientY
};
},
eDiv : function (pos) {
//处理DIV
var wc = this, div = wc.div;
with(div.style) {
left = pos.left + "px";
top = pos.top + "px";
width = pos.width + "px";
height = pos.height + "px";
}
},
sMove : function () {
//鼠标按下后
var wc = this;
wc.click = wc.reMouse();
if (wc.iFunc) return true;
with (wc.div.style) {
display = "block";
width = height = "0px";
}
wc.iFunc = Object.addEvent(document, "onmousemove", wc.iMove.bind(wc));
wc.eFunc = Object.addEvent(document, "onmouseup", wc.eMove.bind(wc));
},
iMove : function () {
//鼠标移动时
var wc = this, oms = wc.click, mos = wc.reMouse()
wc.eDiv({
left : Math.min(mos.x, oms.x), top : Math.min(mos.y, oms.y),
width : Math.abs(mos.x - oms.x), height : Math.abs(mos.y - oms.y)
});
if (window.IE) wc.div.setCapture(); //为了拽出浏览器
try {
if (document.selection) document.selection.empty();
else window.getSelection().removeAllRanges();
} catch (exp) {}
},
eMove : function () {
//鼠标松开后
var wc = this;
if (window.IE) wc.div.releaseCapture(); //为了拽出浏览器
wc.div.style.display = "none";
Object.delEvent(document, "onmousemove", wc.iFunc);
Object.delEvent(document, "onmouseup", wc.eFunc);
wc.click = wc.iFunc = wc.eFunc = null;
}
};
var win_load = Object.addEvent(window, "onload", function () {
var mouse = new CMouse, div = document.createElement("div");
div.innerHTML = new Array(101).join("<br //>");
document.body.appendChild(div);
});
</script>
</head>
<body></body>
</html>