html 画出矩形，鼠标弹起，矩形消失
图片
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 画出矩形，鼠标弹起，矩形消失的更多相关文章
- 第15.30节 PyQt编程实战：通过eventFilter监视QScrollArea的widget（）的Paint消息画出scrollAreaWidgetContents的范围矩形
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.引言 在<PyQt(Python+Qt)学习随笔:QScrollArea滚动区域详解> ...
- OpenCV代码：画出轮廓的外接矩形，和中心点
#include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include & ...
- opencv2 使用鼠标绘制矩形并截取和保存矩形区域图像
前言 好长时间没写博文了,今天偷偷懒写篇关于opencv2中鼠标响应操作的文章. 鼠标操作属于用户接口设计,以前一直使用Qt来做,但是如果只需要简单的鼠标,键盘操作,直接调用opencv库的函数也未尝 ...
- 在OpenCV中利用鼠标绘制矩形和截取图像的矩形区域
这是两个相关的程序,前者是后者的基础.实际上前一个程序也是在前面博文的基础上做的修改,请参考<在OpenCV中利用鼠标绘制直线> .下面贴出代码. 程序之一,在OpenCV中利用鼠标绘制矩 ...
- H5坦克大战之【画出坦克】
今天是个特殊的日子,圣诞节,也是周末,在这里先祝大家圣诞快乐!喜庆的日子,我们可以稍微放松一下,扯一扯昨天雷霆对战凯尔特人的比赛,这场比赛大威少又双叒叕拿下三双,而且是一个45+11+11的超级三双, ...
- 像画笔一样慢慢画出Path的三种方法(补充第四种)
今天大家在群里大家非常热闹的讨论像画笔一样慢慢画出Path的这种效果该如何实现. 北京-LGL 博客号@ligl007发起了这个话题.然后各路高手踊跃发表意见.最后雷叔 上海-雷蒙 博客号@雷蒙之星 ...
- 纯CSS3画出小黄人并实现动画效果
前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
- 使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...
- CSS画出的各种形状图
利用CSS可以画出各种需要的图形目录[1]矩形[2]圆形[3]椭圆[4]直角三角形[5]正三角形[6]平行四边形[7]梯形[8]六角星[9]六边形[10]五角星简单图形 矩形div{ width: 1 ...
- WPF 如何画出1像素的线
如何有人告诉你,请你画出1像素的线,是不是觉得很简单,实际上在 WPF 上还是比较难的. 本文告诉大家,如何让画出的线不模糊 画出线的第一个方法,创建一个 Canvas ,添加一个线 界面代码 < ...
随机推荐
- PAT Counting Leaves[一般]
1004 Counting Leaves (30)(30 分) A family hierarchy is usually presented by a pedigree tree. Your job ...
- 软件包管理:rpm包管理-yum在线管理-IP地址配置和网络yum源
只需告诉系统你想安装那个包,剩下的所有依赖问题yum都会解决. 有些情况下不能上网,但可以使用光盘. centos的yum是免费的.redhatyum付费. yum管理的其实同样是rpm包.并没有yu ...
- Bootstrap学习笔记-布局
Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...
- UVM中的factory机制实现
首先在Systemverilog中便有对于重载的最基本的支持. 1)定义task/function时,使用virtual关键字.那之后在test_case中调用时,便使用句柄指向的对象的类型而不是句柄 ...
- SV中的数据类型
Verilog-1995中规定的数据类型有:变量(reg), 线网(wire), 32位有符号数(integer), 64位无符号数(time), 浮点数(real). SV扩展了reg类型为logi ...
- 关于在ASP.NET中使用JavaScript的建议
一个很恼人的情况,就是当你使用JS在一个ASP,NET应用程序中引用一个在模板页初始化的服务器控件的时候: 比如,我们在模板页有一个TextBox的服务器控件,而且我们想要去获取他的Text:如果你使 ...
- python 展开嵌套的序列
将一个多层嵌套的序列展开成一个单层列表 可以写一个包含yield from 语句的递归生成器来轻松解决这个问题. from collections import Iterable def flatte ...
- 配置QT Mingw & opencv
可以直接从这里下载别人构建好的 https://github.com/huihut/OpenCV-MinGW-Build --------------------------------------- ...
- Linux基础命令---gunzip
gunzip 解压缩被gzip压缩过的文件.此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora. 1.语法 gunzip [-ac ...
- svn忽略目录,svn忽略app目录add toignore list,避免每次更新很多app的内容下来导出到本地很麻烦
svn忽略目录,svn忽略app目录add toignore list,避免每次更新很多app的内容下来导出到本地很麻烦 ------------------------------ 本人微信公众帐号 ...