js控制div缩放和移动

最新推荐文章于 2024-02-04 09:16:54 发布
最新推荐文章于 2024-02-04 09:16:54 发布
阅读量5.7k 收藏
点赞数
原文链接：https://www.jb51.net/article/32823.htm
版权

 

 
<!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>用键盘控制DIV</title> 
<style type="text/css"> 
html,body{overflow:hidden;} 
body{margin:0;padding:0;} 
pre{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;margin:12px;} 
span{color:#999;} 
#box{position:absolute;top:50px;left:300px;width:100px;height:100px;background:red;} 
</style> 
<script type="text/javascript"> 
window.onload = function () 
{ 
var oBox = document.getElementById("box"); 
var bLeft = bTop = bRight = bBottom = bCtrlKey = false; 

setInterval(function () 
{ 
if (bLeft) 
{ 
oBox.style.left = oBox.offsetLeft - 10 + "px" 
} 
else if (bRight) 
{ 
oBox.style.left = oBox.offsetLeft + 10 + "px" 
} 

if (bTop) 
{ 
oBox.style.top = oBox.offsetTop - 10 + "px" 
} 
else if(bBottom) 
{ 
oBox.style.top = oBox.offsetTop + 10 + "px" 
} 
//防止溢出 
limit(); 
},30); 

document.onkeydown = function (event) 
{ 
var event = event || window.event; 
bCtrlKey = event.ctrlKey; 

switch (event.keyCode) 
{ 
case 37: 
bLeft = true; 
break; 
case 38: 
if(bCtrlKey) 
{ 
var oldWidth = oBox.offsetWidth; 
var oldHeight = oBox.offsetHeight; 

oBox.style.width = oBox.offsetWidth * 1.5 + "px"; 
oBox.style.height = oBox.offsetHeight * 1.5 + "px"; 

oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 + "px"; 
oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 + "px"; 

break; 
} 
bTop = true; 
break; 
case 39: 
bRight = true; 
break; 
case 40: 
if(bCtrlKey) 
{ 
var oldWidth = oBox.offsetWidth; 
var oldHeight = oBox.offsetHeight; 

oBox.style.width = oBox.offsetWidth * 0.75 + "px"; 
oBox.style.height = oBox.offsetHeight * 0.75 + "px"; 

oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 + "px"; 
oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 + "px"; 

break; 
} 
bBottom = true; 
break; 
case 49: 
bCtrlKey && (oBox.style.background = "green"); 
break; 
case 50: 
bCtrlKey && (oBox.style.background = "yellow"); 
break; 
case 51: 
bCtrlKey && (oBox.style.background = "blue"); 
break; 
} 

return false 
}; 
document.onkeyup = function (event) 
{ 
switch ((event || window.event).keyCode) 
{ 
case 37: 
bLeft = false; 
break; 
case 38: 
bTop = false; 
break; 
case 39: 
bRight = false; 
break; 
case 40: 
bBottom = false; 
break; 
} 
}; 
//防止溢出 
function limit() 
{ 
var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight] 
//防止左侧溢出 
oBox.offsetLeft <=0 && (oBox.style.left = 0); 
//防止顶部溢出 
oBox.offsetTop <=0 && (oBox.style.top = 0); 
//防止右侧溢出 
doc[0] - oBox.offsetLeft - oBox.offsetWidth <= 0 && (oBox.style.left = doc[0] - oBox.offsetWidth + "px"); 
//防止底部溢出 
doc[1] - oBox.offsetTop - oBox.offsetHeight <= 0 && (oBox.style.top = doc[1] - oBox.offsetHeight + "px") 
} 
}; 
</script> 
</head> 
<body> 
<pre> 
红色方块为键盘操作区域，您可以进行如下操作： 
上：↑ 下：↓ 左：← 右：→ 
Ctrl + 1 : 背景变为绿色 
Ctrl + 2 : 背景变为黄色 
Ctrl + 3 : 背景变为蓝色 
Ctrl + ↑ : 放大 
Ctrl + ↓ : 缩小 
</pre> 
<div id="box"></div> 
</body> 
</html>

用键盘控制DIV

 
红色方块为键盘操作区域，您可以进行如下操作： 
上：↑ 下：↓ 左：← 右：→ 
Ctrl + 1 : 背景变为绿色 
Ctrl + 2 : 背景变为黄色 
Ctrl + 3 : 背景变为蓝色 
Ctrl + ↑ : 放大 
Ctrl + ↓ : 缩小

 

 

Hi竹子
关注
js拖动和缩放DIV代码
09-14
js拖动和缩放DIV代码，js拖动和缩放DIV代码js拖动和缩放DIV代码js拖动和缩放DIV代码js拖动和缩放DIV代码js拖动和缩放DIV代码
js实现div的缩放功能
qq_36281882的博客
07-01 9912
下面总结一下自己实现的两种缩放方式，一种是以左上角为缩放中心，一种是以元素中心为缩放中心。 一、以div左上角为缩放中心
js实现div的拖动放大缩小
geek123520的博客
08-23 2585
js实现div的拖动放大缩小 效果 js实现div的拖动放大缩小 code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
js 控制移动
cyh
06-04 606
主要用到定时器setInterval(定时执行的函数, 时间) clearInterval(定时器对象) 关闭一个定时器 对象.offsetLeft 当前距离父元素的左边距 无标题文档 #div{ background:#0F0; width:200px; height:200px; position:absolute; top:50px; left:0px; }
用js控制人物的移动
04-20
这是我用js做的一个练习，中间可以改进的地方有很多，中间也留了我做这个的一些疑问，有兴趣的可以看看，这是好多年前提交的一个版本，看到所需几分要50,表示吓到了。
js实现鼠标拖拽缩放div实例代码
10-17
综上所述，本篇文章详细介绍了如何使用JavaScript和jQuery来实现鼠标拖拽和缩放DIV的交互效果。通过分析代码实现，我们可以了解到在现代Web开发中，通过JavaScript捕捉和处理鼠标事件是一项非常基础且重要的技能。在...
原生js实现拖拽移动与缩放效果
10-14
在JavaScript中，实现拖拽移动和缩放效果是常见的交互设计需求，特别是在开发网页应用时。下面我们将详细探讨如何利用原生JS实现这两个功能。 首先，我们从拖拽移动开始。拖拽移动的基本思路是监听鼠标按下...
用HTML,JS底层实现地图的平移缩放和移动
05-15
在创建地图页面时，我们需要一个`<div>`元素作为地图容器，通过CSS设置其大小和位置，以便JS能够在这个区域内绘制地图。 JavaScript是实现动态交互的核心，它允许我们在用户与网页交互时执行代码。在这个项目中，...
vuejs移动端实现div拖拽移动
12-12
在Vue.js移动端开发中，实现一个可拖动的div元素是...综上所述，通过结合Vue.js的响应式系统、触摸事件监听和适当的CSS布局，我们可以成功地在移动端实现一个可拖动的div元素，从而创建类似iPhone悬浮窗口的交互体验。
纯js操作div拖移/伸缩，拉动结束有渐变动画，支持快捷键
pippe的专栏
02-05 2008
 script type="text/javascript">...    //保留的位置    var saveLeft,saveTop,saveWidth,saveHeight;    var theBody;    var eventType;    //事件种类, "move"、"resize"    var div;        //创建并设定div的参数    functio
html移动开发手势缩放（纯干货）（基于hammer velocity）
06-21
html移动开发手势缩放（纯干货）（基于hammer velocity） div实现手势缩放 移动 实现点击按钮放大缩小 在Android、ios端均可使用 上次为demo 下载后即可使用
div js 缩放方法
热门推荐
leixu1027的博客
05-31 1万+
话不多说，上代码，要的就是那种直接可以运行的的，ok的 zoomElement(elmnt) { if (elmnt.addEventListener) { // IE9, Chrome, Safari, Opera elmnt.addEventListener('mousewheel', MouseWheelHandler, ...
js实现鼠标拖拽缩放div
hhy1006894859的博客
03-19 5967
封装为了jq插件，如下 drag.js ;(function ($) { $.fn.dragDiv = function (options) { var def = { maxW:600,// 可伸缩的最大宽度 minW:50// 可伸缩的最小宽度 };// 参数默认值 var opts ...
js控制div缩放移动
weixin_30556161的博客
03-08 406
*{margin:0;padding:0;} #content{ width:200px; height:200px; position:relative; background:#EEEEEE; border:1px solid #f00; } #drapdiv{ width:15px; height:15px; background:#99C...
js拖动（点击+移动）
qq_42275455的博客
09-08 4880
双层函数：点击事件+鼠标移动事件 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; #bar{
JS实现通过双指捏合，对div进行放大缩小
JulyNight的博客
02-08 3186
【代码】JS实现通过双指捏合，对div进行放大缩小。
Js动态绑定事件与定时器--实现div块的放大缩小
Shirongliang的博客
02-18 530
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box" style="width: 100px;height: 100px; border: 1px solid;"></div> <input type="button"
实现 组件： 拖拽、缩放、 生成辅助线 以及吸附功能。
最新发布
lzfengquan的博客
02-04 1098
遍历画布上的所有元素（除了当前拖拽元素），并为每个元素计算并保存辅助线的位置。在拖拽过程中，监听 drag 事件，并将拖拽元素的位置与之前保存的数据进行比较。当拖拽元素时，通过比较拖拽元素与画布上其他元素的位置，当某个元素与拖拽元素的距离接近时，显示辅助线。顶对顶：拖拽元素的顶部与对比元素的顶部对齐。顶对底：拖拽元素的顶部与对比元素的底部对齐。底对顶：拖拽元素的底部与对比元素的顶部对齐。底对底：拖拽元素的底部与对比元素的底部对齐。中：拖拽元素的中部与对比元素的中部对齐。top：用于计算对齐位置的参考位置。
JS实现键盘控制div全方位移动
huangqiang80的博客
01-13 899
JS实现键盘控制div全方位移动 创建onkeydown的全局响应事件，给div设置加速度，并控制div开始移动。 创建定时器控制div持续移动，这样可以防止div移动的卡顿现象。 创建onkeyup的全局响应事件，控制div停止移动。 div移动的卡顿现象是由于在按下键盘时，系统需要区分用户是否是持续输入，这个过程就会出现短暂的卡顿，用定时器可以巧妙的避免。 完整代码： <style lang="css"> #box1{ width: 100px;
vue中svg怎么缩放,移动
06-02
在Vue中，可以使用第三方库svg-pan-zoom来实现SVG图像的缩放和移动。svg-pan-zoom是一个独立的JavaScript库，可以轻松与Vue集成。以下是在Vue中使用svg-pan-zoom实现SVG缩放和移动的基本步骤： 1. 安装svg-pan-zoom库 可以使用npm或yarn来安装svg-pan-zoom库。 ``` npm install svg-pan-zoom --save ``` 2. 导入svg-pan-zoom库 在Vue组件中导入svg-pan-zoom库。 ```javascript import svgPanZoom from 'svg-pan-zoom'; ``` 3. 在Vue组件中创建SVG元素 使用SVG元素来创建SVG图像，并将其添加到Vue组件中。 ```html <template> <div> <svg ref="svg"> <circle cx="50" cy="50" r="40" fill="red"></circle> </svg> </div> </template> ``` 4. 初始化svg-pan-zoom 在Vue组件的mounted钩子函数中初始化svg-pan-zoom库。 ```javascript mounted() { const svg = this.$refs.svg; const panZoom = svgPanZoom(svg, { zoomEnabled: true, controlIconsEnabled: true, fit: true, center: true, minZoom: 0.1, maxZoom: 10, zoomScaleSensitivity: 0.2, panEnabled: true, contain: false, refreshRate: 'auto', beforePan: null, onPan: null, onZoom: null }); } ``` 在上述代码中，我们使用svg-pan-zoom的构造函数来初始化库，并将SVG元素传递给它。通过传递选项参数，我们可以自定义缩放和平移的行为。 5. 在Vue组件中使用svg-pan-zoom 可以使用svg-pan-zoom提供的API方法来实现SVG图像的缩放和平移。 ```javascript // 缩放到指定比例 panZoom.zoom(2); // 缩放到原始比例 panZoom.resetZoom(); // 平移到指定位置 panZoom.pan({x: 50, y: 50}); // 平移到原始位置 panZoom.resetPan(); ``` 以上就是在Vue中使用svg-pan-zoom实现SVG缩放和移动的基本步骤。注意，这只是一个简单的示例，实际应用中可能需要更复杂的代码来实现更高级的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值