图片

code

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

.box {

    border:1px solid black;

    width: 0px;

    height: 0px;

    position: absolute;

    z-index:-;

}

div{

opacity:;

border:1px solid black;

width:800px;

height:500px;

}

</style>

<script type="text/javascript">

window.onload = function(e) {

    e = e || window.event;

    // startX, startY 为鼠标点击时初始坐标

    var startX, startY;

    // 鼠标按下

    document.onmousedown = function(e) {

        startX = e.pageX;

        startY = e.pageY;

        // 在页面创建 box

        var active_box = document.createElement("div");

        active_box.id = "active_box";

        active_box.className = "box";

        active_box.style.top = startY + 'px';

        active_box.style.left = startX + 'px';

        document.body.appendChild(active_box);

        active_box = null;

    };

    // 鼠标移动

    document.onmousemove = function(e) {

        // 更新 box 尺寸

        if(document.getElementById("active_box") !== null) {

            var ab = document.getElementById("active_box");

            if(e.pageX>startX){

                if(e.pageY>startY){

                    active_box.style.top = startY + 'px';

                    active_box.style.left = startX + 'px';

                    ab.style.width = Math.abs(e.pageX - startX) + 'px';

                    ab.style.height = Math.abs(e.pageY - startY) + 'px';

                }else if(e.pageY==startY){

                    active_box.style.top = startY + 'px';

                    active_box.style.left = startX + 'px';

                    ab.style.width = Math.abs(e.pageX - startX) + 'px';

                    ab.style.height = Math.abs(e.pageY - startY) + 'px';

                }else{

                    active_box.style.top = e.pageY + 'px';

                    active_box.style.left = startX + 'px';

                    ab.style.width = Math.abs(e.pageX - startX) + 'px';

                    ab.style.height = Math.abs(e.pageY - startY) + 'px';

                }

            }else if(e.pageX==startX){

                if(e.pageY>startY){

                    active_box.style.top = startY + 'px';

                    active_box.style.left = startX + 'px';

                    ab.style.width = Math.abs(e.pageX - startX) + 'px';

                    ab.style.height = Math.abs(e.pageY - startY) + 'px';

                }else if(e.pageY==startY){

                    active_box.style.top = startY + 'px';

                    active_box.style.left = startX + 'px';

                    ab.style.width = Math.abs(e.pageX - startX) + 'px';

                    ab.style.height = Math.abs(e.pageY - startY) + 'px';

                }else{

                    active_box.style.top = e.pageY + 'px';

                    active_box.style.left = startX + 'px';

                    ab.style.width = Math.abs(e.pageX - startX) + 'px';

                    ab.style.height = Math.abs(e.pageY - startY) + 'px';

                }

            }else{

                if(e.pageY>startY){

                    active_box.style.top = startY + 'px';

                    active_box.style.left = e.pageX + 'px';

                    ab.style.width = Math.abs(e.pageX - startX) + 'px';

                    ab.style.height = Math.abs(e.pageY - startY) + 'px';

                }else if(e.pageY==startY){

                    active_box.style.top = e.pageY + 'px';

                    active_box.style.left = e.pageX + 'px';

                    ab.style.width = Math.abs(e.pageX - startX) + 'px';

                    ab.style.height = Math.abs(e.pageY - startY) + 'px';

                }else{

                    active_box.style.top = e.pageY + 'px';

                    active_box.style.left = e.pageX + 'px';

                    ab.style.width = Math.abs(e.pageX - startX) + 'px';

                    ab.style.height = Math.abs(e.pageY - startY) + 'px';

                }

            }

        }

    };

    // 鼠标抬起

    document.onmouseup = function(e) {

        if(document.getElementById("active_box") !== null) {

            var ab = document.getElementById("active_box");

            ab.removeAttribute("id");

            // 如果长宽均小于 3px，移除 box

            document.body.removeChild(ab);

        }

    };

};

</script>

</head>

<body>

<div></div>

<p>点击鼠标左键并拖动绘制矩形</p>

</body>

</html>

html 画出矩形，鼠标弹起，矩形消失的更多相关文章

  1. 第15.30节 PyQt编程实战：通过eventFilter监视QScrollArea的widget（）的Paint消息画出scrollAreaWidgetContents的范围矩形

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.引言 在<PyQt(Python+Qt)学习随笔:QScrollArea滚动区域详解> ...

  2. OpenCV代码：画出轮廓的外接矩形，和中心点

    #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include & ...

  3. opencv2 使用鼠标绘制矩形并截取和保存矩形区域图像

    前言 好长时间没写博文了,今天偷偷懒写篇关于opencv2中鼠标响应操作的文章. 鼠标操作属于用户接口设计,以前一直使用Qt来做,但是如果只需要简单的鼠标,键盘操作,直接调用opencv库的函数也未尝 ...

  4. 在OpenCV中利用鼠标绘制矩形和截取图像的矩形区域

    这是两个相关的程序,前者是后者的基础.实际上前一个程序也是在前面博文的基础上做的修改,请参考<在OpenCV中利用鼠标绘制直线> .下面贴出代码. 程序之一,在OpenCV中利用鼠标绘制矩 ...

  5. H5坦克大战之【画出坦克】

    今天是个特殊的日子,圣诞节,也是周末,在这里先祝大家圣诞快乐!喜庆的日子,我们可以稍微放松一下,扯一扯昨天雷霆对战凯尔特人的比赛,这场比赛大威少又双叒叕拿下三双,而且是一个45+11+11的超级三双, ...

  6. 像画笔一样慢慢画出Path的三种方法(补充第四种)

    今天大家在群里大家非常热闹的讨论像画笔一样慢慢画出Path的这种效果该如何实现. 北京-LGL 博客号@ligl007发起了这个话题.然后各路高手踊跃发表意见.最后雷叔 上海-雷蒙 博客号@雷蒙之星 ...

  7. 纯CSS3画出小黄人并实现动画效果

    前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...

  8. 使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...

  9. CSS画出的各种形状图

    利用CSS可以画出各种需要的图形目录[1]矩形[2]圆形[3]椭圆[4]直角三角形[5]正三角形[6]平行四边形[7]梯形[8]六角星[9]六边形[10]五角星简单图形 矩形div{ width: 1 ...

  10. WPF 如何画出1像素的线

    如何有人告诉你,请你画出1像素的线,是不是觉得很简单,实际上在 WPF 上还是比较难的. 本文告诉大家,如何让画出的线不模糊 画出线的第一个方法,创建一个 Canvas ,添加一个线 界面代码 < ...

随机推荐

  1. CloudFlare Support - Error 522: Connection timed out 错误522：连接超时

    522错误意味着我们无法在所有到达原点Web服务器. 这方面有几个主要原因: 原始服务器太超载回应. 源Web服务器具有挡住了我们的请求的防火墙,或者数据包被主机的网络内下降. 源Web服务器脱机,或 ...

  2. 批量生成反色图片，用PHOTOSHOP批处理功能。

    http://zhidao.baidu.com/link?url=Iz46PDPnEITummTEwo2GtUrK6AeAjlidJ7HtCPJ6NYZJbbllRwNg2iBAcNwF2TYjccP ...

  3. Python 进制转换、位运算

    一.进制转换 编程用十进制,十进制转换为二进制.八进制.十六进制 In [135]: bin(23) Out[135]: '0b10111' In [136]: oct(23) Out[136]: ' ...

  4. dialog提交表单

    <div id="dialog" title="添加客户"> <!--表单提交--> <form id="dialogF ...

  5. Linux系统——MySQL基础（三）

    ### MySQL主从复制实践#### 主从复制实践准备(1)主从复制数据库实战环境准备MySQL主从复制实践对环境的要求比较简单,可以是单机单数据库多实例的环境,也可以是两台服务器,每个机器一个独立 ...

  6. wprintf或_tprintf不显示中文和乱码问题

    1.由于中文问题,宽字节编译时会遇到一些不显示或显示乱码问题 如下列代码:  分别是WIN API写入和读取文件,测试_tprintf就会不显示 #include "stdafx.h&quo ...

  7. linux脚本-判断进程是否存在，从而可以做预警处理..

    count=`ps -ef | grep Seeyon | grep -v "grep" | wc -l` echo $count if [ $count -gt 0 ]; the ...

  8. python-安装，设置环境变量（win10）

    python官网: https://www.python.org/ 选择需要的版本下载 下载后安装 我装的是默认位置C:\Python27 打开环境变量设置: 右键电脑--->属性----> ...

  9. Linux基础命令---eject

    eject eject指令允许在软件控制下弹出可移动媒体(通常是光盘.软盘.磁带或Jaz或ZIP磁盘).该命令还可以控制一些由某些设备支持的自动弹出功能的多光盘转换器,并关闭一些光盘驱动器的盘. 对应 ...

  10. 线程属性pthread_attr_t简介

    本文编辑整理自: http://hi.baidu.com/7828058/blog/item/256e16decd1a385e94ee3784.html http://www.ibm.com/deve ...