js改变盒子大小(上下左右)分析
js改变盒子大小
知识点
三个mouse事件:mousedown mousemove mouseup
css的定位和cursor
思路
先解决单边问题
识别范围,得到所选区域 event.
根据距离,判断方向
根据方向进行样式的增加减少,注意top和left的变化
当然还要增加最小的限制
注意
识别改变的四个位置
得到它们的范围
判断改变范围的大小
注意改变top和left的边的时候,注意将盒子的left变为this.offsetLeft-(原来的event.clientX减去现在的event.clinentX);top则变为this.offsetTop-(原来的event.clientY减去现在的event.clinentY)
最后还要限制最小的范围
var container=document.getElementById('container'),
span=document.getElementById('span'),
move=document.getElementById('move'),
wrap=document.getElementById('wrap')
divs=container.getElementsByTagName('div'),
top=divs[0],
bottom=divs[1],
left=divs[2],
right=divs[3];
//找到位置
container.onmousedown=function(event){
var event=event||window.event
event.preventDefault()
var mouseDownX=event.clientX
var mouseDownY=event.clientY
//得到位置
var topLocal=this.offsetTop
var bottomLocal=this.offsetTop+this.offsetHeight
var leftLocal=this.offsetLeft
var rightLocal=this.offsetLeft+this.offsetWidth var w=this.offsetWidth
var h=this.offsetHeight
//识别范围
var areaT=topLocal+20
var areaB=bottomLocal-20
var areaL=leftLocal+20
var areaR=rightLocal-20
//判断改变方块的大小方向
var changeL=event.clientX<areaL
var changeR=event.clientX>areaR
var changeT=event.clientY<areaT
var changeB=event.clientY>areaB
document.onmousemove=function(event){
var event=event||window.event
if(changeL){
container.style.left=leftLocal-(mouseDownX-event.clientX)+'px'
container.style.width=(mouseDownX-event.clientX)+w+'px'
}
if(changeR){
container.style.width=event.clientX-mouseDownX+w+'px'
}
if(changeT){
container.style.top=topLocal-(mouseDownY-event.clientY)+'px'
container.style.height=mouseDownY-event.clientY+h+'px'
}
if(changeB){
container.style.height=event.clientY-mouseDownY+h+'px'
}
if(parseInt(container.style.width)<150){
container.style.width=150+'px'
document.onmousemove=null
}
if(parseInt(container.style.height)<150){
container.style.height=150+'px'
document.onmousemove=null
}
}
document.onmouseup=function(){
document.onmousemove=null
document.onmouseup=null
}
}
js改变盒子大小(上下左右)分析的更多相关文章
- 改变字体大小实现自适应之js方案A
一.元素大小有两种写法 1.写结果:设计师给的移动端页面sketch设计稿一般是750px宽度,在sublime编辑器里,设置cssrem或rem-unit插件为56px的字体大小.做页面时,设计稿是 ...
- rem布局和使用js rem动态改变字体大小,自适应
解决rem文字动态改变字体大小: <script> console.log(window.devicePixelRatio); var iScale = 1; iScale = iScal ...
- JavaScript动画-拖拽改变元素大小
▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...
- jquery插件之拖拽改变元素大小
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...
- SQLSERVER复制优化之一《改变包大小》
SQLSERVER复制优化之一<改变包大小> 自从搭了复制之后以为可以安枕无忧了,谁不知问题接踵而来 这次遇到的问题是丢包,不知道情况的读者可以先看一下我之前写的一篇<SQLSERV ...
- echarts 图表自适应外部盒子大小
项目中用到了echarts,由于页面是自适应的,还得兼容移动, 因此图表还需要根据盒子的大小来变化. 自适应窗口及盒子大小 页面中有一个[放大.缩小]功能,及全屏展示和预览图表 窗口自适应 let m ...
- javascript动画系列第四篇——拖拽改变元素大小
× 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...
- WPF实现无边框窗体拖拽右下角▲ 改变窗体大小【framwork4.0】 谢谢大家关注
效果图:(右下角拖拽改变窗体大小) 第一步:添加xaml代码: <Border Name="ResizeBottomRight" MouseMove="Resize ...
- 【问题】js 改变鼠标样式,chrome浏览器不能立即更新,暂没有解决办法
元素的css,cursor可以改变鼠标样式.也就是鼠标放到元素上去时,改变为相应状态. 通过JS改变cursor时,我发现chrome浏览器不能立即更新,需要动一下鼠标才行,试了几个其它浏览器都是立即 ...
随机推荐
- php会话(session)实现原理
先考虑如下问题: 禁用了cookie,session能否使用? 如何把session存储数据库/memcached/redis 如何实现一个严格的30分钟过期的会话?. 如何实践web服务器集群的会话 ...
- asp.net core 一 Centos 环境部署
.netcore的运行环境,创建asp.net core 项目 CentOS 7 ,dotnet-sdk-2.0.0-2.0.0-1.x86_64 直接在liunx创建项目并运 ...
- 使用FFMPeg对视频进行处理
FFMPeg处理视频的核心操作方式是命令,无论是在Windows上还是Linux上.那么下边就简单介绍下,常见的处理命令. 示例1:截取一张352×240尺寸大小的,格式为jpg的图片: ffmpeg ...
- 老男孩Python全栈开发(92天全)视频教程 自学笔记17
day17课程内容: 装饰器回顾练习 登录功能: #登录京东,不同的页面,选择页面,然后不同的登录方式with open('作业5.1jingdong','w',encoding='utf8') as ...
- Jar程序使用MyBatis集成阿里巴巴druid连接池
在写jar程序,而不是web程序的时候,使用mybatis作为持久层,可以集成POOLED连接池,而阿里的druid不能用,确实很郁闷.不过有办法. 首先准备好数据库配置文件 然后对Druid进行一个 ...
- C# 如何使用预处理指令?
#define Debug #define Release #undef Release #if Debug using System; #endif 注意:#define 必须在文档最前面
- nginx proxy_pass 与 rewrite 简记
rewrite syntax: rewrite regex replacement [flag] Default: - Context: server, location, if 如果正则表达式(re ...
- python更新数据库脚本两种方法
最近项目的两次版本迭代中,根据业务需求的变化,需要对数据库进行更新,两次分别使用了不同的方式进行更新. 第一种:使用python的MySQLdb模块利用原生的sql语句进行更新 import MySQ ...
- java并发编程笔记3-同步容器&并发容器&闭锁&栅栏&信号量
一.同步容器: 1.Vector容器实现了List接口,Vector实际上就是一个数组,和ArrayList类似,但是Vector中的方法都是synchronized方法,即进行了同步措施.保证了线程 ...
- Linux基础四
vim编辑器 vi编辑器的增强版,语法高亮等扩展功能 vim三种工作模式 a,i,o等键输出模式 命令模式,输入模式,末行模式 模式间的切换 a:当前行插入 i:当前行插入 o:全新一行插入 :键末 ...