鼠标选择框特效

原创 2007年09月21日 10:05: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 != "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> 

 

【HTML】鼠标特效

鼠标特效 CSS鼠标控制箭头 手形 移动 帮助 箭头朝上双向 指示 等待
  • idealistic
  • idealistic
  • 2017年04月16日 10:32
  • 503

C++实现鼠标选中框功能代码

C++实现鼠标选中框功能代码: bool m_IsMouseScelect; CSprite m_RectImage; RECT m_MouseRect;...
  • OnInit
  • OnInit
  • 2013年12月15日 15:15
  • 1323

winform 中实现鼠标框选效果 c#

项目中需要实现一个鼠标框选的功能,现在将代码分享出来: 思路:实现三个鼠标事件 MouseDown,MouseMove,MouseUp, 至于框选后需要实现什么功能则可以在MouseUp中调用 完...
  • ShuSheng0007
  • ShuSheng0007
  • 2014年11月26日 14:16
  • 1240

HTML+js实现鼠标绘制可拖动矩形

.box {     background: #f00;     width: 0px;     height: 0px;...
  • baolin811
  • baolin811
  • 2016年05月18日 18:32
  • 2782

一个鼠标点击水波纹理shader

一张图片,通过鼠标点击产生水波纹理,shader比较简单,算法主要在C#那边,多线程优化计算 用下面shader创建一个材质,创建一个面片或Cube并挂上下面C#脚本,设置图片像素,默认是256*2...
  • zuig2
  • zuig2
  • 2017年01月06日 22:40
  • 1200

前端成长之路—canvas实现跟随鼠标和跟随手指粒子特效

html lang="en"> head> meta charset="UTF-8"> title>粒子跟随特效title> style> *{ ...
  • IForDreams
  • IForDreams
  • 2017年07月20日 03:30
  • 1378

openCV 鼠标框选并显示框选区域

cvSetImageROI函数( 基于给定的矩形设置图像的ROI(感兴趣区域,region of interesting))...
  • yanglong890124
  • yanglong890124
  • 2014年06月07日 16:38
  • 1947

canvas鼠标移动动态星空背景特效

这个可以作为背景,里面是直线匀速运动的散点,当两个点直接小于一定距离时会通过canvas生成一条线相连接。而且当鼠标移入时,鼠标指针一定范围内的点会和鼠标相连接,从而控制散点移动。总的来说还是很好玩的...
  • zh_rey
  • zh_rey
  • 2017年05月03日 14:06
  • 1890

跟随鼠标一起流动的粒子动画 JS 原生代码

粒子效果演示 html, body { text-align: center; margin:0; padding:0; background: #000000; color: #6666...
  • Jensen_Yao
  • Jensen_Yao
  • 2017年03月22日 19:47
  • 1090

Opencv鼠标截取图片场景

#include #include #define WINDOW_NAME "鼠标事件窗口" using namespace std; using namespace cv; Rect g_re...
  • qq_23880193
  • qq_23880193
  • 2015年08月30日 21:03
  • 645
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:鼠标选择框特效
举报原因:
原因补充:

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