图片

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. PHP中header('content-type:text/html;charset="utf-8')和error_reporting()的作用

    1.header PHP文件插入header("Content-type: text/html; charset=utf-8");相当于页面里面的<meta http-equ ...

  2. 一个新人对HTML的理解

    首先 HTML里面包含的东西是什么? 在HTML里面   注释的表示方式是    <!--注释内容--> 注释 HTML初始默认包含了两大部分: 一部分是 <head>< ...

  3. liferay总结的通用的工具类

    在写增删改查的时候,自己动手写了几个通用的工具类,这几个通用的工具类也是基于API写的 第一个是liferay中的分页.跟我们做普通的web开发,分页是一样的首先需要建立一个分页的实体的类 packa ...

  4. C# 拓展方法实例

    namespace BenJi{ class Program { static void Main(string[] args) { Console.WriteLine("你要调试程序吗?y ...

  5. Loadrunder场景设计篇——添加windows Resource计数器和指标说明

    目的 监控要测试的windows服务器的资源使用情况 A.添加计数器步骤 1.添加视图,方法双击.拖动左侧的Windows Rescources到右边图形区,或右键右侧已有视图,Open a New ...

  6. 论文笔记：语音情感识别（四）语音特征之声谱图，log梅尔谱，MFCC，deltas

    一:原始信号 从音频文件中读取出来的原始语音信号通常称为raw waveform,是一个一维数组,长度是由音频长度和采样率决定,比如采样率Fs为16KHz,表示一秒钟内采样16000个点,这个时候如果 ...

  7. 2018年星际争霸AI挑战赛–三星与FB获冠亚军,中科院自动化所夺得季军

    雷锋网 AI 科技评论消息,2018 年 11 月 13-17 日,AAAI 人工智能与交互式数字娱乐大会 (AI for Interactive Digital Entertainment) 在阿尔 ...

  8. Python入门之软件开发目录规范

    本章重点: 理解在开发人标准软件时,如何布局项目目录结构,以及注意开发规范的重要性. 一.为什么要有好的目录结构 二.目录组织的方式 三.关于README的内容 四.关于requirements.tx ...

  9. python条件判断if···else、循环while和for

    1.if···else条件判断基本语法 if 条件: 执行语句 elif 条件 : 执行语句 …… else : 执行语句 var=input("请输入表示会员级别的数字(1-5):&quo ...

  10. bzoj2982: combination（Lucas定理）

    Description LMZ有n个不同的基友,他每天晚上要选m个进行[河蟹],而且要求每天晚上的选择都不一样.那么LMZ能够持续多少个这样的夜晚呢?当然,LMZ的一年有10007天,所以他想知道答案 ...