图片

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. Selenium+Java元素定位之三

    首先自己先准备一个表格代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. (C#) SQLite数据库连接字符串

    最常用的:Data Source=filename;Version=3; 自增主键: Create  test1( [id] integer PRIMARY KEY AUTOINCREMENT ,[n ...

  3. js值类型和引用类型的区别

    1:赋值 值类型的赋值:直接将存储的数据赋值一份进行赋值,两份数据在内存中是完全独立的. 引用类型赋值:引用类型的赋值的时候,是将变量中的存储的地址赋值一份单独存储,但是两个变量中修改其中一个对象,另 ...

  4. PhoneGap+Cordova+SenchaTouch-01-环境搭建

    转http://my.oschina.net/zhongwenhao/blog/369465 环境搭建基于 windows  ,mac系统可以借鉴 1.安装NodeJS 和ruby http://no ...

  5. js文本框字数限制

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. Python Data Science Toolbox Part 1 Learning 1 - User-defined functions

    User-defined functions from:https://campus.datacamp.com/courses/python-data-science-toolbox-part-1/w ...

  7. 生成带有表格的word附件和动态赋值

    生成带有表格的word附件和动态赋值, 表格前后需要添加一个特殊的开始和结束的域,表格第一列 TableStart:AuditJdcttbzInfo 和表格的最后一列 TableEnd:AuditJd ...

  8. redis安装及注意事项

    在linux中使用wget时,若报-bash: wget: command not found,则表明没有安装wget,需要安装,安装命令如下: yum -y install wget 安装完成即可以 ...

  9. Js基础知识3-字符串、正则表达式全解

    字符串的生成转换 你可以将任何类型的数据都转换为字符串,你可以用下面三种方法的任何一种: var myStr = num.toString(); // "19" var myStr ...

  10. .xz文件解压及linux常见压缩

    最近下载mysql8.0的压缩包,发现压缩包的格式为xz tar czvf 或 tar xzvf 的压缩格式很好解压,使用tar命令即可,z是针对 gzip,j是针对 bzip2. 但xz的压缩文件就 ...