DW 小框框的移动

最新推荐文章于 2021-07-21 19:15:32 发布

原创最新推荐文章于 2021-07-21 19:15:32 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

在Dreamweaver（DW）中，通过创建HTML并应用JavaScript，设计了一个可以随意移动的小框框。首先在DW中准备所需资源，接着定义小框框的样式，然后利用JS赋予小框框移动的功能，每次移动的距离为20像素，用户可以通过键盘方向键控制移动。最终在浏览器中预览，实现了交互式的移动效果。

接下来我展示一个可以随便移动的小框框；

首先还是跟上次一样在DW中创建一个文件把用到的放里面；
接下来我们就可以创建HTML了，这次的随便移动小框框不用写div都可以；
下面就开始设计一下小框框的大小吧，框框的任何外形之类的可以根据自己的爱好设计

我就简简单单设计一个；

4、设计好小框框后我们可以去浏览器打开看到形状了；

5、小框框设计好后，它还是一个不会动的，这就要用到JS了；

6、我们把Js应用到小框框让它可以随便移动；

7、我们设计的是每移动一次就是20个像素（也可以根据自己的需求来设计）；

8、代码都写好后去浏览器打开看看效果；

9、打开后可以通过按上下左右来移动了；

这个就是本期的分享了；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ZTurbo S

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

南大软院大神养成计划第六天

jx370的博客

11-21

778

今天让我们来做一个高度自适应的三行两列宽度固定布局在html的基础上，添加CSS样式使得html中的文本按照我们想要的方式显示在不同位置。我们可以用盒模型整体控制，也可以使用框架，这两者的效果是一样。使用盒模型的话，在进行布局时，就要把整个页面看作是一个大盒子，里面的内容看做是一个个的小盒子，这样在编辑代码时，按照自己分的盒子进行排

达梦（dm8）数据库主备（dw）守护集群安装部署

最新发布

weixin_49739541的博客

01-30

2285

所需空间: 1869M请选择安装目录 [/home/dmdba/dm/dmdbms]:

参与评论您还未登录，请先登录后发表或查看评论

调整盒子位置的方式

weixin_小白鼠的博客

07-06

2509

调整盒子位置的方式 1 边距margin/padding：标准流内调整, 注意可能存在盒子塌陷的问题 2 弹性布局flex： flex布局之后，就不用考虑盒子类型的概念了，行内元素也可以直接设置宽高了 3 浮动float: 特点：脱离标准流，不再保留原来的位置，其他盒子可能会占有它原来的位置缺点：无法撑开父盒子，脱标不占位，可能与其他内容重叠清除浮动：清楚浮动带来的影响，多种方法，给父盒子设置高度、clear:both、伪元素 4 定位position：绝对定位的特点：脱离标准流，不再保留原来的位置

盒子居中的方法

qq_45059908的博客

07-21

4568

【方法1】margin值必须知道两个盒子的宽高，用大盒子的宽度减去小盒子的宽度在除2，再用margin-top,margin-left进行移动【方法2】当小盒子宽高不固定的时候实现盒子的居中水平居中：把小盒子设置为行内块元素（inline-block ( 行内块元素 )），父元素设置text-align:center; 垂直居中：当两个元素在同一行显示，这两个元素高度不一样，这两个元素垂直对齐默认基线对齐，垂直居中对齐用vertical-align属性，注意：两个元素都需要设置vertical

盒子居中的几种方法

A2523865985的博客

02-23

2200

三种盒子居中的方法 1、margin居中； 2、button居中； 3、绝对定位居中；代码如下 1、margin 居中 CSS： #box { width: 200px; height: 200px; margin: auto; background: #0ff; } 2、button居中* CS...

dw html 菜单浮动,DW和float在设计中的浮动使用

weixin_35851515的博客

06-21

4260

1.打开ps，新建一个【html.5】，首先把基本结构搭建出来，并命名【box】，【】,开始结束，具体如图所示。2.复制【box】，.在上面，【.box】，在{}里给出宽度【330px】，高度【330px】颜色【#dedede】，具体如图所示。3.这个关系是，白色盒子里面有三个小盒子，所以在这个里面，给它加三个小盒子，【4.三个小盒子都给一个属性，将abc进行复制，放在上面，.在上面，给出宽度【1...

最好的Vim学习教程-Vim Adventures 全攻略（附彩蛋）

热门推荐

Zhan's Quant life

08-25

3万+

Vim

【一文读懂卷积神经网络（一）】可能是你看过的最全的CNN（步长为1，无填充）

weixin_43217928的博客

03-14

5891

Python实现CNN卷积神经网络1.卷积层的前向与后向传播（无填充，步长strides=1）前向传播1.1何为卷积？功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML ...

【一文读懂卷积神经网络（三）】可能是你看过的最全的CNN（步长不为1，无填充）

weixin_43217928的博客

03-15

1548

本系列将由浅入深的介绍卷积神经网络的前向传播与后向传播，池化层的前向传播与后向传播，并分别介绍在不同步长与不同填充的情况下卷积层和池化层的前向传播与后向传播又有哪些不同。 CNN卷积神经网络的原理【附Python实现】1. CNN的前向传播（无填充，步长strides不为1）1.1 卷积层的前向传播1.2 何为池化？1.2.1 最大池化1.2.2 均值池化激活函数前向传播总流程2. CNN的反向传...

【一文读懂卷积神经网络（四）】可能是你看过的最全的CNN（步长不为1，有填充）

weixin_43217928的博客

03-18

1263

本系列将由浅入深的介绍卷积神经网络的前向传播与后向传播，池化层的前向传播与后向传播，并分别介绍在不同步长与不同填充的情况下卷积层和池化层的前向传播与后向传播又有哪些不同。 CNN卷积神经网络的原理【附Python实现】1. CNN的前向传播（有填充，步长strides不为1）1.1 卷积层的前向传播1.2 池化层的前向传播2. CNN的反向传播（无填充，步长strides不为1）2.1 池化层的反...

html盒子位置如何设置吗,css盒子的定位

weixin_35473667的博客

06-04

4162

CSS盒子定位：什么是盒子定位呢，顾名思义，就是元素盒子(以下主要以块级盒讲解)在页面中的位置，定位就是确定他的位置，盒子定位分为以下四种：1、静态位置(position：static)也就是默认值：每一个元素在没有float值的时候，都有position值，就是static，可以直接理解它在是默认值的时候就是常规流，所有规则与常规流一样；2、相对位置(position：relative)：相对...

用dw怎么设置html盒子,dreamweaver

weixin_30663789的博客

06-22

3550

dreamweaverCSS使用教程：方框属性方　框　属　性【定义　CSS　样式方框属性】使用“CSS　样式定义”对话框的方框(又称盒子)类别可以为控制元素在页面上的放置方式的标签和属性定义设置。可以在应用填充和边距设置时将设置应用于元素的各个边，也可以使用“全部相同”设置将相同的设置应用于元素的所有边。定义元素在页面上的放置方式：在“CSS　样式定义”对话框中，选择“方框”(如下图)，然后设置所...

html盒子整体向下移动,盒子上下左右居中方法全（持续更新中）

weixin_42505032的博客

05-31

8729

总是忘记这几个方法，今天来记录一下一、已知大小盒子；左右居中1、使用定位，左右拉取方法：html:css:.box{width: 300px;height: 300px;border: 1px solid orange;position: relative;}.child{width: 100px;height: 100px;border: 1px solid blue;position:a...

移动div盒子原生js

weixin_41865901的博客

12-26

969

开始点击第一个按钮移动到400px 点击第二个按钮移动到800px 点击第一个按钮移动到400px 这里需要用到定时器需要注意的是： 1.元素移动div盒子要脱离文档流，即（position：absolute） 2.通过element.style.left不能获取元素的left，只能设置，要用offsetLeft()来获取 3.最好不用var timeid = setInterval(fn,time)的方式，因为这样每点击一次按钮就会定义一个新的timeid，你会发现移动的盒子逐渐加快速度。好的方式是

js控制页面div盒子移动

kylinxjd的博客

07-31

3666

html代码简单地设置一个宽100px，高100px，背景色为红色的div盒子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...

html div怎么向右偏移,div向右偏移设置 css让div靠右移一定距离

weixin_39822993的博客

06-11

9027

转自：https://www.thinkcss.com/shili/1372.shtmldiv对象盒子向右偏移设置，使用css让div靠右一定距离-div向右移教程实例篇div向右偏移一定距离，可采用margin外边距实现、也可以使用padding来实现，这就要看不同情况下如何灵活选择了。这里thinkcss为大家介绍各种css布局div向右移方法。两个盒子前者是蓝色的div，后者是红色的div...

CSS3使div盒子上下移动

zqxqiyun的博客

10-23

9228

CSS3使div盒子上下移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...

怎么让盒子向右均速移动呢？

weixin_45974687的博客

04-12

2243

盒子向右均速移动四个步骤 : 1.声明一个变量来保存盒子的原始位置2.注册点击事件3.开启定时器3.1开始移动3.2把现在的位置值赋值给left属性3.3边界检测3.4 到目标位置清除定时器停止运动4. 元素复位 CSS : #box{ width: 100px; height: 100px; background-co...

dw里实现拖拽小球移动到框里

05-28

实现这个功能可以分为两个步骤： 1. 实现小球的拖拽可以通过监听小球的mousedown、mousemove和mouseup事件，实现小球的拖拽。具体实现方法如下： ```javascript var ball = document.getElementById("ball"); var container = document.getElementById("container"); var isDragging = false; var offsetX = 0; var offsetY = 0; ball.addEventListener("mousedown", function(e) { isDragging = true; offsetX = e.offsetX; offsetY = e.offsetY; }); document.addEventListener("mousemove", function(e) { if (isDragging) { var x = e.clientX - offsetX; var y = e.clientY - offsetY; ball.style.left = x + "px"; ball.style.top = y + "px"; } }); document.addEventListener("mouseup", function() { isDragging = false; }); ``` 2. 判断小球是否移动到框里可以通过判断小球是否与框的边界相交，来判断小球是否移动到框里。具体实现方法如下： ```javascript var ballRect = ball.getBoundingClientRect(); var containerRect = container.getBoundingClientRect(); if ( ballRect.left >= containerRect.left && ballRect.right <= containerRect.right && ballRect.top >= containerRect.top && ballRect.bottom <= containerRect.bottom ) { // 小球在框里 } else { // 小球不在框里 } ``` 把这两个步骤结合起来，就可以实现拖拽小球移动到框里的功能了。