[DIV+CSS] set the screen capture Part 1 （div截取屏幕）

浏览数：46 / 时间：2015年06月09日

使用下面的代码来获取屏幕。用DIV加CSS 来控制。使用mousemove来获取移动的时候DIV的变化，

效果图如下：

技术分享

使用5个DIV来组成实现截图目的第一部分，现在只是实现了选择的第一部分。

HTML 部分

1 <div id="bg" class="divShawd" onmousedown="mousedown()" onmouseup="mouseup()" onmousemove="mousemove()" ondblclick="confirmCapture()">
2    </div>
3 <div id="divTop" class="divShawdArea"></div>
4 <div id="divLeft" class="divShawdArea"></div>
5 <div id="divRight" class="divShawdArea"></div>
6 <div id="divBottom" class="divShawdArea"></div>

CSS 部分

.divShawdArea {
    cursor: crosshair;
    position: absolute;
    display: none;
    background-color: black;
    z-index: 1000;
    -moz-opacity: 0.7;
    opacity: .70;
    filter: alpha(opacity=70);
}
 
.divShawd {
    cursor: crosshair;
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    -moz-opacity: 0.0;
    opacity: .0;
    filter: alpha(opacity=0);
}

JAVASCRIPT 部分

<script type="text/javascript">
    var moveCondition = false;
    var move = false;
    var moveArea = false;
    var moveAreaCondition = false;
 
    function showdiv() {
        //document.getElementById("bg").style.display = "block";
        $("#bg").show();
        $("#bg").css("cursor", "crosshair");
 
        moveCondition = true;
    }
 
    function hidediv() {
        moveCondition = false;
        //document.getElementById("bg").style.display = ‘none‘;
        $("#bg").hide();
        $("#divTop").hide();
        $("#divLeft").hide();
        $("#divRight").hide();
        $("#divBottom").hide();
    }
 
    var origX = 0, compX = 0, origAreaX = 0, trimX = 0;
    var origY = 0, compY = 0, origAreaY = 0, trimY = 0;
 
    function mousedown() {
        if (moveCondition) {
 
            $("#divTop").show();
            $("#divLeft").show();
            $("#divRight").show();
            $("#divBottom").show();
            // $("#show").show();
 
            move = moveCondition;
            origX = event.clientX;
            origY = event.clientY;
            // $("#show").css("left", event.clientX).css("top", event.clientY);
            // $("#show").css("width", "1").css("height", "1");
            showdivArea(origX, origY, origX + 1, origY + 1);
        } else if (moveAreaCondition) {
            moveArea = true;
            origAreaX = event.clientX;
            origAreaY = event.clientY;
        }
    }
 
    function mousemove() {
        if (move == true) {
            showdivArea(origX, origY, event.clientX, event.clientY);
        }
        else if (moveArea) {
            trimX = event.clientX - origAreaX;
            trimY = event.clientY - origAreaY;
            //$("#divBottom").html = "X1:" + origX + ",Y1:" + origY + ",X2:" + compX + ",Y2:" + compY;
            showdivArea(origX + trimX, origY + trimY, compX + trimX, compY + trimY);
        }
    }
 
    function mouseup() {
        move = false;
        moveCondition = false;
        moveAreaCondition = true;
        $("#bg").css("cursor", "pointer");
 
        compX = event.clientX;
        compY = event.clientY;
 
        if (moveArea) {
            moveArea = false;
            moveAreaCondition = false;
 
            origX += trimX;
            origY += trimY;
            compX += trimX;
            compY += trimY;
        }
    }
 
    function confirmCapture() {
        alert("select area is : (X1:" + origX + ",Y1:" + origY + ",X2:" + compX + ",Y2:" + compY + ")");
        $("#bg").css("cursor", "default");
        hidediv();
    }
 
    function showdivArea(oX, oY, cX, cY) {
 
        if (oX > cX) {
            var temp = oX;
            oX = cX;
            cX = temp;
        }
 
        if (oY > cY) {
            var temp = oY;
            oY = cY;
            cY = temp;
        }
 
        //$("#show").css("width", compX - origX).css("height", compY - origY);
 
        $("#divTop").css("left", "0").css("top", "0");
        $("#divTop").css("width", "100%").css("height", oY);
 
        $("#divLeft").css("left", "0").css("top", oY);
        $("#divLeft").css("width", oX).css("height", cY - oY);
 
        $("#divRight").css("left", cX).css("top", oY);
        $("#divRight").css("width", screen.width - cX).css("height", cY - oY);
 
        $("#divBottom").css("left", "0").css("top", cY);
        $("#divBottom").css("width", "100%").css("height", screen.height - cY);
 
    }
 
</script>