图片

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. python直接赋值、浅拷贝和深拷贝

    # 解: # import copy # names1=['Amir','Barry','Cgakes','Dao',[11,22,33]] # names2=names1#直接赋值,指向同一个对象 ...

  2. 小试---EF5.0入门实例1

    现在做个小练习吧~~~ 第一步:首先新建一个数据库名字为Test;数据库里面只有一个表UserTable 脚本为: USE [master] GO /****** 对象: Database [Test ...

  3. 好用的firefox浏览器、geckodriver驱动的版本组合（55 和 0.19.1）

    试过很多的firefox浏览器版本和geckodriver的组合,有时候好用,有时候不好用,现在确定了一个好用的版本组合,记录一下: firefox:版本55,而且此版本可以用firebug geck ...

  4. python webdriver api-读取、设置配置文件

    文件结构: db.ini放置db信息的配置文件 文件中[gloryroad]是section信息 下边的dbname等是option信息 UiObjectMap.ini放置访问web的配置信息 配置用 ...

  5. Linux基础命令---resizefs

    resize2fs 调整ext2\ext3\ext4文件系统的大小,它可以放大或者缩小没有挂载的文件系统的大小.如果文件系统已经挂载,它可以扩大文件系统的大小,前提是内核支持在线调整大小. size参 ...

  6. QEvent postEvent/sendEvent

    可以自訂事件類型,最簡單的方式,是透過QEvent::Type指定事件類型的常數值,在建構QCustomEvent時作為建構引數並透過postEvent()傳送事件,例如: const QEvent: ...

  7. angularjs 路由参数

    .state('classrooms',{ url: '/classrooms/:id' }) .state('classrooms',{ url: '/classrooms/{id}' }) .st ...

  8. python之路----初识面向对象（二）

    类命名空间与对象.实例的命名空间 创建一个类就会创建一个类的名称空间,用来存储类中定义的所有名字,这些名字称为类的属性 而类有两种属性:静态属性和动态属性 静态属性就是直接在类中定义的变量 动态属性就 ...

  9. Java MD5校验与RSA加密

    区别: MD5加密: 加密时通过原字符串加密成另一串字符串 解密时需要原加密字符串进行重新加密比较两次加密结果是否一致 RSA加密: 加密时通过原字符串生成密钥对(公钥+私钥) 解密时通过公钥和私钥进 ...

  10. MySQL之表连接（内外连接和重命名的使用）

    #要多练练 1.连接查询根据连接方式分为 内连接 等值连接 非等值连接 自连接 外连接 左外连接(左连接) 右外连接(右连接) 当多张表进行连接查询,若没有任何条件进行限制,会 发生什么现象? 会出现 ...