web页面实现框选效果

原创 2015年11月19日 13:59:12

因工作需要,今天上午用jquery写了一个网页上实现框选效果的js特效,附带有获取鼠标当前所在对象的获取方法,以及去掉浏览器自带的选中效果的css方案,现在贴出来给大家做个参考吧

body {/* 这是去掉浏览器自带的选中效果 */
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
$(document).ready(function() {    
    var x = y = mousekey = 0;
    $(document).bind("mousedown", function (e) {
        mousekey = true;
        //var currObj = e.originalEvent.srcElement; //这里是获取当前鼠标所在对象
        $('body').css("cursor", "crosshair").append('<div id="divSelectArea" style="position:absolute;background-color:#e073d4;"></div>');
        x = e.pageX;
        y = e.pageY;
        $('#divSelectArea').css({ top: e.pageY, left: e.pageX }).fadeTo(12, 0.2);//点击后开始拖动并透明;
    }).mousemove(function (e) {
        if (mousekey) {
            $('#divSelectArea').css({ top: e.pageY > y ? y : e.pageY, left: e.pageX > x ? x : e.pageX, height: Math.abs(e.pageY - y), width: Math.abs(e.pageX - x) }).html(e.originalEvent.srcElement.tagName);
        }
    }).mouseup(function () {
        x = y = mousekey = 0;
        $('#divSelectArea').remove();
        $('body').css("cursor", "default");
    });            
});
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

web复选框的基础用法

.box{ width: 300px; height: 300px; background: yellow; } $(document).ready(funct...

web网页常用弹出窗口特效集合

1.flash在线小游戏不倒翁大炮 http://www.xwcms.net/js/flashxyx/57558.html 2.HTML5+js实现白天漂浮特效 http://www.xwcms...

鼠标框选效果

[Unity实战]框选效果

原文链接:http://blog.csdn.net/xv_ly15/article/details/8563068 几次看见有人问框选物体的做法,之前斑竹也介绍过,用画的框生成的视椎,用经典图形学...
  • lyh916
  • lyh916
  • 2015-06-06 13:29
  • 1839
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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