关闭

鼠标选择框特效

368人阅读 评论(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 != "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 = "&nbsp;";
        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> 

 
0
0

猜你在找
【套餐】Hadoop生态系统零基础入门
【套餐】嵌入式Linux C编程基础
【套餐】2017软考系统集成项目——任铄
【套餐】Android 5.x顶级视频课程——李宁
【套餐】深度学习入门视频课程——唐宇迪
【直播】广义线性模型及其应用——李科
【直播】从0到1 区块链的概念到实践
【直播】计算机视觉原理及实战——屈教授
【直播】机器学习之凸优化——马博士
【直播】机器学习&数据挖掘7周实训--韦玮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:244970次
    • 积分:3371
    • 等级:
    • 排名:第9900名
    • 原创:21篇
    • 转载:306篇
    • 译文:3篇
    • 评论:42条