C语言跟随鼠标画方框,JS拖动鼠标画出方框实现鼠标选区的方法
本文实例讲述了JS拖动鼠标画出方框实现鼠标选区的方法。分享给大家供大家参考。具体如下:
相当实用的一个JS技巧,拖动鼠标可画出一个方框,可作为一个选区的功能,可以用来画流程图,设计草图什么的,也可以作为上传头像时裁切选择图片,在头像裁切中使用广泛,鼠标在图片上拖动拉出一个方框,这个方框就代表着选区的功能,目前网页上已流行的一种操作。主要是依赖于JavaScript代码来实现。
运行效果如下图所示:
具体代码如下:
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
鼠标拖动画矩形
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}
html{color:#000;overflow-y:scoll;overflow:-moz-scrollbars-vertical}
.div{position:absolute; border:1px dashed blue; width:0px; height:0px;left:0px; top:0px; overflow:hidden;}
.retc{position:absolute; border:1px solid #CCCCCC; overflow:hidden; background:#EFEFEF}
var wId = "w";
var index = 0;
var startX = 0, startY = 0;
var flag = false;
var retcLeft = "0px", retcTop = "0px", retcHeight = "0px", retcWidth = "0px";
document.onmousedown = function(e){
flag = true;
try{
var evt = window.event || e;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
startX = evt.clientX + scrollLeft;
startY = evt.clientY + scrollTop;
index++;
var div = document.createElement("div");
div.id = wId + index;
div.className = "div";
div.style.marginLeft = startX + "px";
div.style.marginTop = startY + "px";
document.body.appendChild(div);
}catch(e){
//alert(e);
}
}
document.onmouseup = function(){
try{
document.body.removeChild($(wId + index));
var div = document.createElement("div");
div.className = "retc";
div.style.marginLeft = retcLeft;
div.style.marginTop = retcTop;
div.style.width = retcWidth;
div.style.height = retcHeight;
document.body.appendChild(div);
}catch(e){
//alert(e);
}
flag = false;
}
document.onmousemove = function(e){
if(flag){
try{
var evt = window.event || e;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
retcLeft = (startX - evt.clientX - scrollLeft > 0 ? evt.clientX + scrollLeft : startX) + "px";
retcTop = (startY - evt.clientY - scrollTop > 0 ? evt.clientY + scrollTop : startY) + "px";
retcHeight = Math.abs(startY - evt.clientY - scrollTop) + "px";
retcWidth = Math.abs(startX - evt.clientX - scrollLeft) + "px";
$(wId + index).style.marginLeft = retcLeft;
$(wId + index).style.marginTop = retcTop;
$(wId + index).style.width = retcWidth;
$(wId + index).style.height = retcHeight;
}catch(e){
//alert(e);
}
}
}
var $ = function(id){
return document.getElementById(id);
}
希望本文所述对大家的javascript程序设计有所帮助。
C语言跟随鼠标画方框,JS拖动鼠标画出方框实现鼠标选区的方法相关推荐
- html语言怎么改变字体颜色,JS实现改变HTML上文字颜色和内容的方法
本文实例讲述了JS实现改变HTML上文字颜色和内容的方法.分享给大家供大家参考,具体如下: 1. JavaScript Day 1 // to change the color of an objec ...
- 实现div在固定区域跟随鼠标移动点击拖动而产生的变化
一.思路 1.在外层增加一个 DIV 容器,并设置好容器的大小.(即:宽和高) 当容器存在边框的时候,由于这里还没找到获取的方法,所以,在容器边框大于 0 的时候,获得的容器的限制区域的坐标会有误差. ...
- JS实现鼠标滚轮缩小放大拖动图片代码
Jquery,JS实现鼠标滚轮缩小放大拖动图片代码 直接上代码:可以直接使用: <!doctype html public "-//W3C//DTD XHTML 1.0 Transit ...
- js 拖动层示例[转]
共享一个简单的JS拖动层效果,支持ie,ff,opera,safari: ie有专门的拖动方法:dragstart,drag,dragend分别是开始拖动,拖动,结束拖动.但是其他浏览器(dom类,例 ...
- js检测鼠标是否在操作_原生JS趣味demo:炫酷头像鼠标追随效果的实现
我们常在一些网页中 可以看到鼠标追随效果 一个简单的图片.动画 甚至一小段文字 都可以作为鼠标跟随的载体 之前咱们的直播课中 老师也讲过相关的canvas追随粒子特效 今天 就让我们一起来用原生js ...
- JS拖动水晶球特效代码
代码简介: 请等待图片加载完成,比较炫的一个创意,你自行车的链条一样,鼠标拖动水晶球,模拟了系在一起的物体的运动过程,那些小球也挺漂亮. 代码内容: View Code <html> &l ...
- php js统计链接点击次数,JS实现在线统计一个页面内鼠标点击次数的方法
本文实例讲述了JS实现在线统计一个页面内鼠标点击次数的方法.分享给大家供大家参考.具体实现方法如下: js记录鼠标的点击次数 function addCookie(name,cookievalue,t ...
- 拖动物体的时候,防止鼠标按下的时候对象突然跳动一下
拖动物体的时候,防止鼠标按下的时候对象突然跳动一下 $(function() {init(); }); // mouse interaction drag // 拖动物体的时候,防止鼠标按下的时候对象 ...
- Atitit.跨语言 java c#.net php js常用的codec encode算法api 兼容性 应该内置到语言里面...
Atitit.跨语言 java c#.net php js常用的codec encode算法api 兼容性 应该内置到语言里面 1. 常用算法1 1.1. 目录2 1.2. 定义和用法编辑2 1.3 ...
最新文章
- JSP 与 Servlet 的关系
- UA PHYS515A 电磁理论V 电磁波与辐射5 电磁波在介质中的传播
- 如何在服务器端完善游戏的用户体验
- 传惠普下周公布webOS平台最终命运
- linux ll命令无效
- webserver之mysql模块
- python做一个linux网卡,Linux系统Python可以选择不同网卡进行网络访问吗?
- 2021-08-01mysql外键
- VS2019 windows桌面应用_桌面美化神器RocketDock EX增强版整合超多皮肤/图标哦!
- mybatis处理批量数据插入怎么处理效率最高
- 初学者零基础如何快速入门学习平面设计
- gpio_desc()的分析
- BestMPRBaseVtk-009-设置默认窗宽窗位
- 2020寒假【gmoj2008】【Oliver的成绩】【高精度】
- 第四章 软件总体设计
- 也不能在你喝醉的时候假装很生气的臭骂一顿
- 015. P2P技术详解(一):NAT详解——详细原理、P2P简介
- 55--mvc:annotation-driven标签解析
- 12. 自制操作系统: risc-v ACLINT
- 随机变量列的四种收敛性
热门文章
- import引入json文件_关于TypeScript中import JSON的正确姿势详解
- 为什么尽量使用常量引用
- php7协程通信使用,PHP7下的协程实现
- matlab语法手册下载,MATLAB及其在理工课程中的应用指南 第4版.pdf
- 移植MT76x8 私有WIFI驱动V4.1.0.0到Openwrt 18.06所遇到的坑
- python创建模块文件夹_python文件、文件夹、压缩包处理模块-shutil模块
- AI学习---卷积神经网络
- SAP PP顾问面试题及资料
- Python常用正则表达式总结
- [改善Java代码]在接口中不要存在实现代码