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");
    });            
});
版权声明:本文为博主原创文章,未经博主允许不得转载。

美丽新世界新闻发布系统

  • 2003年03月13日 00:00
  • 543KB
  • 下载

Web前端—既可以输入又可以选择的input框

HTML5 Datalist       PS:这里的list一定要跟Datali
  • yingdynasty
  • yingdynasty
  • 2015年11月30日 17:49
  • 6126

[Unity实战]框选效果

原文链接:http://blog.csdn.net/xv_ly15/article/details/8563068 几次看见有人问框选物体的做法,之前斑竹也介绍过,用画的框生成的视椎,用经典图形学...
  • lyh916
  • lyh916
  • 2015年06月06日 13:29
  • 2257

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

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

Unity3D]结合轮廓显示,实现完整的框选目标

几次看见有人问框选物体的做法,之前斑竹也介绍过,用画的框生成的视椎,用经典图形学的视锥裁剪就能做到。 视锥裁剪资料学习:http://www.linuxgraphics.cn/graphics/op...
  • andyhebear
  • andyhebear
  • 2016年02月19日 09:58
  • 2053

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

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

Web JS实现页面返回顶部

采用js的scrollTop属性实现了一下这个简单的功能 当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个“返回顶部”的按钮,用户点击一下,就可以回到顶...
  • royal_mjz
  • royal_mjz
  • 2017年04月12日 09:54
  • 607

非常好的web弹出层框架 -- layer

1,关于web弹出层 之前做web弹出层,使用的是jqueryui,那个复杂,那个大。 而且样式怪怪的。而且文件很大。 关于layer layer是一款近年来口碑极佳的web弹层组件,她具备全...
  • freewebsys
  • freewebsys
  • 2015年09月01日 20:28
  • 11372

web 页面实现页面右下角弹窗功能

最近客户有需求,需要提醒没有增加密码找回问题的用户,页面可以在右下角弹窗提醒,并可以点击直接跳转:           这个功能最好的解决方法,就是在页面上加个标签,可以来判断数据是否为空:...
  • ZM_GK
  • ZM_GK
  • 2015年12月08日 15:38
  • 3102

Web前端从入门到放弃(js鼠标拖拽特效)

js鼠标拖拽特效 我们来实现用鼠标点击一个盒子并可以在浏览器窗口下拖拽 原理:利用鼠标点击盒子,然后通过鼠标坐标减去盒子在浏览器的坐标从而得到鼠标在盒子上的disX和disY的值,在利用onm...
  • Du_Ke_Can
  • Du_Ke_Can
  • 2016年10月12日 19:03
  • 878
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:web页面实现框选效果
举报原因:
原因补充:

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