<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

    *{margin:0;padding:0;}

    #box1{width:500px;height:500px;border:1px solid #000;position:absolute;left:400px;}

    .cBox{border:1px solid #0C6; width:30px;position:absolute;}

</style>

<script>

 window.onload = function(){

     var oDiv = document.getElementById('box1');

     oDiv.onmousedown = function(ev){

         var ev = ev || event;

         var initX = ev.clientX;

         var initY = ev.clientY;

         var cDiv = document.createElement('div');

         cDiv.className = 'cBox';

         cDiv.style.left = (initX-oDiv.offsetLeft)+'px';

         cDiv.style.top = (initY)+'px';

         oDiv.appendChild(cDiv);

         document.onmousemove = function(ev){

             var ev = ev || event;

             var disX = 0;

             if(ev.clientX >(oDiv.offsetLeft + oDiv.offsetWidth)){

                disX = oDiv.offsetLeft + oDiv.offsetWidth;

             }else{

                disX = ev.clientX;

             }

             var disY = 0;

             if(ev.clientY >(oDiv.offsetTop + oDiv.offsetHeight)){

                disY = oDiv.offsetTop + oDiv.offsetHeight;

             }else{

                disY = ev.clientY;

             }

             var cBoxWidth = disX - initX-2; /*需要减去cDiv的两个边框*/

             var cBoxHeight = disY - initY-2;

             cDiv.style.width = cBoxWidth+'px';

             cDiv.style.height = cBoxHeight+'px';

          };

         document.onmouseup = function(){

             document.onmousemove = document.onmouseup = null;

        };

         return false;

    };

};

</script>

</head>

<body style="2000px;">

<div id='box1'>

</div>

</body>

</html>

js 模拟鼠标绘制方块的更多相关文章

  1. 由chrome剪贴板问题研究到了js模拟鼠标键盘事件

    写在前面 最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了.下面来说一下今天遇到的一个问题吧 大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示 window.cli ...

  2. js 模拟鼠标事件

    <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8& ...

  3. Js 模拟鼠标点击事件

    var obj = document.getElementById('go'); if(document.all){ obj.click(); }else{ var e = document.crea ...

  4. js 模拟鼠标拖动

    window.addEventListener('message', function (event) { if (event.source != window) return; if (event. ...

  5. JS实现鼠标点击爱心&绘制多边形&每日一言功能

    本篇文章主要介绍我的个人博客 程序猿刘川枫 中页面使用的美化功能(基于JS实现): 1.鼠标点击出现不同颜色爱心特效 2.页面浮动多边形跟随鼠标移动 3.每日一言功能 1.鼠标点击出现爱心特效 经常在 ...

  6. 如何从零绘制k线图 -- 原生js canvas图表绘制

    样式如下图 源码地址: https://github.com/sutianbinde/charts 编写这个需要具备canvas基础,如果没有canvas基础可以学习我前面的cnavas基础博客. 具 ...

  7. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

  8. Selenium2学习-027-WebUI自动化实战实例-025-JavaScript 在 Selenium 自动化中的应用实例之三（页面滚屏，模拟鼠标拖动滚动条）

    日常的 Web UI 自动化测试过程中,get 或 navigate 到指定的页面后,若想截图的元素或者指定区域范围不在浏览器的显示区域内,则通过截屏则无法获取相应的信息,反而浪费了无畏的图片服务器资 ...

  9. python模拟鼠标键盘操作 GhostMouse tinytask 调用外部脚本或程序 autopy右键另存为

    0.关键实现:程序窗口前置 python 通过js控制滚动条拉取全文 通过psutil获取pid窗口句柄,通过win32gui使程序窗口前置 通过pyauto实现右键菜单和另存为操作 1.参考 aut ...

随机推荐

  1. cs231n spring 2017 Python/Numpy基础

    本文使根据CS231n的讲义整理而成(http://cs231n.github.io/python-numpy-tutorial/),以下内容基于Python3. 1. 基本数据类型:可以用 prin ...

  2. 吴裕雄--天生自然 R语言开发学习：导入数据

    2.3.6 导入 SPSS 数据 IBM SPSS数据集可以通过foreign包中的函数read.spss()导入到R中,也可以使用Hmisc 包中的spss.get()函数.函数spss.get() ...

  3. GLSL 的各种着色器效果

    Site Defunct 注意!截止到 16/9/2019 ,这个博客已经被搬迁到了 这里 .以后我的东西都会发在那里.拜拜啦! GLSL 很牛逼 Vignette ScanLine Pixelate ...

  4. java.lang.ClassNotFoundException :xxxxxxx

    码的!java.lang.ClassNotFoundException: org.springframework.jdbc.core.RowMapper这个错误搞了半天 因为写的项目是手动建的WEB- ...

  5. zookeeper 单机部署

    第一步:下载安装包 这里以3.4.11为例  https://archive.apache.org/dist/zookeeper/ 点进去看: 下载tar文件 第二步:上传到服务器 使用ftp工具上传 ...

  6. [PyTorch入门]之迁移学习

    迁移学习教程 来自这里. 在本教程中,你将学习如何使用迁移学习来训练你的网络.在cs231n notes你可以了解更多关于迁移学习的知识. 在实践中,很少有人从头开始训练整个卷积网络(使用随机初始化) ...

  7. 手机视频APP将关闭 生态梦成空的三星如何自救？

    生态梦成空的三星如何自救?"> 三星如今的处境,只能用"屋漏偏逢连夜雨"来形容.继营收.利润.智能手机销量等大幅下滑之后,裁员也接踵而来,股价的下跌也自然在情理之中 ...

  8. spring cloud实战 1-高可用注册中心

    创建父maven项目 提交代码至GitHub 创建eureka-server-1 项目搭建两种方式: 父pom中继承spring-boot-starter-parent,子pom中直接结成父pom.该 ...

  9. 玩转iOS开发：iOS中的GCD开发(三)

    上一章, 我们了解到了GCD里的一些队列和任务的知识, 也实践了一下, 同时我们也对主队列的一些小情况了解了一下, 比如上一章讲到的卡线程的问题, 如果没有看的朋友可以去看看玩转iOS开发:iOS中的 ...

  10. 听起来很美，用起来很累！停车类APP软肋在哪

    据数据显示,全国现有汽车已达1亿7千万辆,停车位缺于6800万个.而在北京,汽车保有量和车位的配比大约是1:0.5,而国际上一般是1:1.2,结构严重失衡.正所谓哪里有需求,哪里就有市场.停车位的走俏 ...