图片

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. R中基本函数学习[转载]

    转自:https://www.douban.com/note/511740050/ 1.数据管理 numeric:数值型向量 logical:逻辑型向量 character:字符型向量list:列表 ...

  2. [LeetCode] 312. Burst Balloons_hard tag: 区间Dynamic Programming

    Given n balloons, indexed from 0 to n-1. Each balloon is painted with a number on it represented by ...

  3. c#实现图片二值化例子（黑白效果）

    C#将图片2值化示例代码,原图及二值化后的图片如下: 原图: 二值化后的图像: 实现代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 2 ...

  4. html03

    快速开发指南:1.新建页面之后,编写外部样式表文件,引入到HTML页面中2.用浏览器打开页面->F12->sources->打开css文件 右边编写样式,左边查看效果3.样式编写完成 ...

  5. 4：7 Struts实现Ajax

    不使用插件: 返回数据: 使用插件: Action里面直接给User赋值,然后在前台拿值. type="json":表示返回json对象: root:表示作为跟对象 include ...

  6. Baidu 推荐技术平台（offer）

    一面: 1 自我介绍 项目介绍. 2 RNN 原理,LSTM原理,GBDT原理,XGB与GBDT的改进. 3 多模匹配,字典树,链表环找入口. 4 c++ static 关键字 5 多线程,线程安全 ...

  7. sql可重复执行语句例子

    1.添加字段 SET @add_key_type_to_report = (SELECT IF( (SELECT count(1) FROM INFORMATION_SCHEMA.COLUMNS WH ...

  8. 【转】SQL Server、Oracle、MySQL和Vertica数据库常用函数对比

    SQL Server.Oracle.MySQL和Vertica数据库常用函数对比 Vertica数据库是HP公司新收购的用于BI方面的数据库. 1. 绝对值 S:select abs(-1) valu ...

  9. Instruments(性能调优 12.3)

    Instruments Instruments是Xcode套件中没有被充分利用的一个工具.很多iOS开发者从没用过Instruments,或者只是用Leaks工具检测循环引用.实际上有很多Instru ...

  10. HTML ajax 上传文件限制文件的类型和文件大小

    html    <input type="file" name="excel" id="excel_input" accept=&qu ...