图片

code

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. <style type="text/css">
  7. .box {
  8.     border:1px solid black;
  9.     width: 0px;
  10.     height: 0px;
  11.     position: absolute;
  12.  
  13.     z-index:-;
  14. }
  15. div{
  16. opacity:;
  17. border:1px solid black;
  18. width:800px;
  19. height:500px;
  20.  
  21. }
  22. </style>
  23. <script type="text/javascript">
  24. window.onload = function(e) {
  25.     e = e || window.event;
  26.     // startX, startY 为鼠标点击时初始坐标
  27.     var startX, startY;
  28.     // 鼠标按下
  29.     document.onmousedown = function(e) {
  30.         startX = e.pageX;
  31.         startY = e.pageY;
  32.         // 在页面创建 box
  33.         var active_box = document.createElement("div");
  34.         active_box.id = "active_box";
  35.         active_box.className = "box";
  36.         active_box.style.top = startY + 'px';
  37.         active_box.style.left = startX + 'px';
  38.         document.body.appendChild(active_box);
  39.         active_box = null;
  40.     };
  41.     // 鼠标移动
  42.     document.onmousemove = function(e) {
  43.         // 更新 box 尺寸
  44.         if(document.getElementById("active_box") !== null) {
  45.             var ab = document.getElementById("active_box");
  46.             if(e.pageX>startX){
  47.                 if(e.pageY>startY){
  48.                     active_box.style.top = startY + 'px';
  49.                     active_box.style.left = startX + 'px';
  50.                     ab.style.width = Math.abs(e.pageX - startX) + 'px';
  51.                     ab.style.height = Math.abs(e.pageY - startY) + 'px';
  52.                 }else if(e.pageY==startY){
  53.                     active_box.style.top = startY + 'px';
  54.                     active_box.style.left = startX + 'px';
  55.                     ab.style.width = Math.abs(e.pageX - startX) + 'px';
  56.                     ab.style.height = Math.abs(e.pageY - startY) + 'px';
  57.                 }else{
  58.                     active_box.style.top = e.pageY + 'px';
  59.                     active_box.style.left = startX + 'px';
  60.                     ab.style.width = Math.abs(e.pageX - startX) + 'px';
  61.                     ab.style.height = Math.abs(e.pageY - startY) + 'px';
  62.                 }
  63.             }else if(e.pageX==startX){
  64.                 if(e.pageY>startY){
  65.                     active_box.style.top = startY + 'px';
  66.                     active_box.style.left = startX + 'px';
  67.                     ab.style.width = Math.abs(e.pageX - startX) + 'px';
  68.                     ab.style.height = Math.abs(e.pageY - startY) + 'px';
  69.                 }else if(e.pageY==startY){
  70.                     active_box.style.top = startY + 'px';
  71.                     active_box.style.left = startX + 'px';
  72.                     ab.style.width = Math.abs(e.pageX - startX) + 'px';
  73.                     ab.style.height = Math.abs(e.pageY - startY) + 'px';
  74.                 }else{
  75.                     active_box.style.top = e.pageY + 'px';
  76.                     active_box.style.left = startX + 'px';
  77.                     ab.style.width = Math.abs(e.pageX - startX) + 'px';
  78.                     ab.style.height = Math.abs(e.pageY - startY) + 'px';
  79.                 }
  80.             }else{
  81.                 if(e.pageY>startY){
  82.                     active_box.style.top = startY + 'px';
  83.                     active_box.style.left = e.pageX + 'px';
  84.                     ab.style.width = Math.abs(e.pageX - startX) + 'px';
  85.                     ab.style.height = Math.abs(e.pageY - startY) + 'px';
  86.                 }else if(e.pageY==startY){
  87.                     active_box.style.top = e.pageY + 'px';
  88.                     active_box.style.left = e.pageX + 'px';
  89.                     ab.style.width = Math.abs(e.pageX - startX) + 'px';
  90.                     ab.style.height = Math.abs(e.pageY - startY) + 'px';
  91.                 }else{
  92.                     active_box.style.top = e.pageY + 'px';
  93.                     active_box.style.left = e.pageX + 'px';
  94.                     ab.style.width = Math.abs(e.pageX - startX) + 'px';
  95.                     ab.style.height = Math.abs(e.pageY - startY) + 'px';
  96.                 }
  97.             }
  98.  
  99.         }
  100.     };
  101.     // 鼠标抬起
  102.     document.onmouseup = function(e) {
  103.         if(document.getElementById("active_box") !== null) {
  104.             var ab = document.getElementById("active_box");
  105.             ab.removeAttribute("id");
  106.             // 如果长宽均小于 3px，移除 box
  107.             document.body.removeChild(ab);
  108.         }
  109.     };
  110. };
  111. </script>
  112. </head>
  113. <body>
  114. <div></div>
  115. <p>点击鼠标左键并拖动绘制矩形</p>
  116. </body>
  117. </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. 字符串最长子串匹配-dp矩阵[转载]

    转自:https://blog.csdn.net/zls986992484/article/details/69863710 题目描述:求最长公共子串,sea和eat.它们的最长公共子串为ea,长度为 ...

  2. jquery closest & parent比较

    .closest() .parents() 从当前元素开始 从父元素开始 沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止. 沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加 ...

  3. 复习一下property

    在面向对象程序里,一个对象不要直接访问另一个对象内部的数据.所以我们使用accessor methods来进行对象内部的数据交互. accessor methods(getters and sette ...

  4. Java-使用IO流对大文件进行分割和分割后的合并

    有的时候我们想要操作的文件很大,比如:我们想要上传一个大文件,但是收到上传文件大小的限制,无法上传,这是我们可以将一个大的文件分割成若干个小文件进行操作,然后再把小文件还原成源文件.分割后的每个小文件 ...

  5. iOS 新浪微博－1.0框架搭建

    项目搭建 1.新建一个微博的项目,去掉屏幕旋转 2.设置屏幕方向-->只有竖向 3.使用代码构建UI,不使用storyboard 4.配置图标AppIcon和LaunchImage 将微博资料的 ...

  6. ASP.NET Post方式提交

    public static string SendMsg(string fxPhone, string fxPassword, string toPhone, string msg) { try { ...

  7. asp.net本地读取excel正确。但在iis服务器上就报错 未在本地计算机上注册“Microsoft.ACE.OleDb.12.0”提供程序

    本地vs2010可以上传ecxel文件.并读取数据,但部署到本地IIS.并访问.则提示: 未在本地计算机上注册“Microsoft.ACE.OleDb.12.0”提供程序 首先:确保安装了Micros ...

  8. Leetcode: Construct Binary Tree from Preorder and Inorder Transversal

    Given preorder and inorder traversal of a tree, construct the binary tree. Note: You may assume that ...

  9. 持续集成之二：搭建SVN服务器（subversion）

    安装环境 Red Hat Enterprise Linux Server release 7.3 (Maipo) jdk1.7.0_80 subversion-1.10.3.tar.gz apr-1. ...

  10. Hive 体系结构介绍

    下面是Hive的架构图. 图1.1 Hive体系结构 Hive的体系结构可以分为以下几部分: (1)用户接口主要有三个:CLI,Client 和 WUI.其中最常用的是CLI,Cli启动的时候,会同时 ...