zoukankan      html  css  js  c++  java
  • web页面实现框选效果

    因工作需要,今天上午用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),  Math.abs(e.pageX - x) }).html(e.originalEvent.srcElement.tagName);
            }
        }).mouseup(function () {
            x = y = mousekey = 0;
            $('#divSelectArea').remove();
            $('body').css("cursor", "default");
        });            
    });
    
  • 相关阅读:
    JAVA-复数计算器
    第十三周总结
    java多线程
    写作的意义
    mysql删除有外键表数据
    Linux firewall防火墙设置
    linux安装ftp
    SELECT list is not in GROUP BY clause and contains nonaggregated
    primordials is not defined
    maven手动添加jar包
  • 原文地址:https://www.cnblogs.com/foren/p/6009099.html
Copyright © 2011-2022 走看看