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 ,添加一个线 界面代码 < ...
随机推荐
- LeetCode--687. 最长同值路径
题目描述:给定一个二叉树,找到最长的路径,这个路径中的每个节点具有相同值.这条路径可以经过也可以不经过根节点.注意:两个节点之间的路径长度由它们之间的边数表示. 示例1:输入: 5 / \ 4 5 / ...
- 微信小程序-1
微信小程序 (开发微信小程序基础:HTML+js+css) l 准备工作 工具安装 开发工具是由微信官方提供 项目的预览(校验环境) l 开发体验阶段 - Hello world ...
- linux lvs
- linux phpize
phpize是什么 1.phpize是用来扩展php扩展模块的,通过phpize可以建立php的外挂模块. 当php编译完后,在bin下面会有phpize这个脚本文件, 在编译你要添加的扩展模块之前, ...
- Python中*args和**kwargs的区别
(注:本文部分内容摘自互联网,由于作者水平有限,不足之处,还望留言指正.) 中秋的夜,微凉,但却始终看不见月亮. 我想,它一定是害羞了,悄悄的躲到了乌云的后面. 嗯,就是这样,我真是太TM机智了. 正 ...
- 数据仓库基础（十三）Informatica workflow
本文转载自:http://www.cnblogs.com/evencao/p/3154715.html 看了几天的Informatica ,关于infor的资料也比较少,主要的<商业智能深入浅出 ...
- MyEclipse 相关设置
1. MyElipse复制项目后,修改项目的发布名称的方式.右击你的项目,选择 properties -- > MyElipse -- > web,然后修改名称即可. 2. IDE查看源代 ...
- Linux服务器配置---ftp限制ip
ftp限制IP 1.通过vsftpd的配置文件以及“hosts.deny”和“hosts.allow”文件设置允许某个ip地址访问 1)修改配置文件“/etc/vsftpd/vsftpd.conf”中 ...
- 使用echo命令清空tomcat日志文件
使用echo命令清空日志文件echo -n "" > /server/tomcat/logs/catalina.out ==>要加上"-n"参数,默 ...
- Linux 系统版本信息
1.# uname -a (Linux查看版本当前操作系统内核信息) 2.# cat /proc/version (Linux查看当前操作系统版本信息) 3.# cat /etc/issue 或 ...