鼠标选择框特效。。。。

最新推荐文章于 2023-02-10 16:25:22 发布

muxrwc

最新推荐文章于 2023-02-10 16:25:22 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： function div null html xhtml 浏览器

本文链接：https://blog.csdn.net/muxrwc/article/details/1792907

版权

JavaScript 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

<!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.constructor != Array) { $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.constructor != Array) { $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>