鼠标选择框特效。。。。

原创 2007年09月20日 13:32:00

<!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 = "&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> 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

自定义弹出框 鼠标滑过按钮有特效

package game.view.component.alert { import com.greensock.TweenLite; import flash.display.Dis...

JQuery鼠标经过弹出气泡框的js特效效果

Animated Menu Hover 1 $(document).ready(function(){ $(".menu li").hover(function() { $(this)....
  • rzg813
  • rzg813
  • 2014-07-07 18:51
  • 1934

css3实现鼠标悬停动画特效

这个案例涉及到了遮罩,动画等 还不错的小案例吧   xmlns="http://www.w3.org/1999/xhtml">     http-equiv="Cont...

js鼠标点击展开收起特效(带缓动效果)

这款网页特效还不错  兼容性很好! 大气阿  转自: JS特效 代码如下 鼠标点击展开收起效果(带缓动效果)-网页特效代码 .box{width:300px;border:1px so...

CSS特效——有趣儿的鼠标模糊效果

彩色文字变换 + 动画相框 + 图片模糊 = 一个有趣儿的鼠标模糊效果。 这次学习了百度前端学院的一个课程,增加了一些CSS3方面的前端知识。

HTML鼠标滑过特效教程

时下,各种个性化展示网站都会通过鼠标特效增强与用户之间的交互,使得网站更加生动,仿佛懂得跟用户谈话一样。就连展示模式相对古板的信息类网站或者门户网站也抵挡不住诱惑,悄悄地加入了一些按钮互动的效果。 ...

Html鼠标 滑过特效

css 鼠标滑过 特效 CSS样式
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)