HTML 里面的图片怎么移动位置?



HTML 里面的图片怎么移动位置? 30

插入一张图片, 它的位置就不变了, 只能敲空格 来移动位置么?
如果用 和<br>都无法移动到理想的位置,请问还有什么好的语句可以移动图片位置么?
Ericle03  |  浏览 17956 次   问题未开放回答  |举报
推荐于2017-09-23 04:41:21 最佳答案
,就是加个style,我全部写出来<img src="images/1.jpg" 
style="position:relative;top:100px;">
你想移动多少,可以吧后面top:100px改下即可,想多移动一点,就把100px改高,px是个单位,你就调整100的大小
<img src="images/1.jpg" style="text-align:center;">
<div style="float:left;clear:both;maring:10px 0px 10px 0px;"><img src="images/1.jpg" style="text-align:center;"></div>

晟熙_杨柳  | 工程师

擅长: IT

其他回答

给图片加个class用相对定位做就可以了

例:
<style type="text/css">
.imgPlace{ position:relative; top:5px; left:5px;/*right:5px;bottom:5px*/}
/*position:relative是相对定位的意思; top是相对离上面的距离,left是相对离左面的距离,right是相对离右面的距离,bottom是相对离下面的距离,*/
</style>

<img src="...." alt=" " title=" " class="imgPlace" />
 本回答被提问者采纳
wang89657dd    |  推荐于2017-09-02 13:29:37
举报|  评论 
25  4
这个效果你先研究一下Actionscript语言吧,和java类似。
可惜我不太懂。大概是这样:
输出鼠标的坐标,再将地图那个图片设置为向那个位置移动,移动速度以及按照那个弧度可以设置。
这个效果的脚本是可以实现的。
回去先学flash里面的脚本吧,也就是Actionscript

鼠标跟随效果吗?

去下代码研究一下吧。好多书里面都当脚本案例用,可以我没认真看...

个你找点资料吧!

http://zhidao.baidu.com/question/28497590.html?si=3
15955501115    |  发布于2008-12-16 18:05
举报|  评论 
0  6
不明白你说什么!
高速车王    |  发布于2008-12-16 18:05
举报|  评论 
0  7
主要是你想怎么移动,移动他的div的话给他的margin设定数值就行了,很多种方法的,主要是看你的需求,margin,padding 或者定义position,都可以,这是一些教程,你看看吧,希望能帮到你
Dw基础视频:http://www.iqiyi.com/playlist388411202.html

DW网页案例 http://www.iqiyi.com/playlist301527502.html

HTML 里面的图片怎么移动位置? 30

插入一张图片, 它的位置就不变了, 只能敲空格 来移动位置么?
如果用 和<br>都无法移动到理想的位置,请问还有什么好的语句可以移动图片位置么?
Ericle03  |  浏览 17956 次   问题未开放回答  |举报
推荐于2017-09-23 04:41:21 最佳答案
,就是加个style,我全部写出来<img src="images/1.jpg" 
style="position:relative;top:100px;">
你想移动多少,可以吧后面top:100px改下即可,想多移动一点,就把100px改高,px是个单位,你就调整100的大小
<img src="images/1.jpg" style="text-align:center;">
<div style="float:left;clear:both;maring:10px 0px 10px 0px;"><img src="images/1.jpg" style="text-align:center;"></div>

晟熙_杨柳  | 工程师

擅长: IT

其他回答

给图片加个class用相对定位做就可以了

例:
<style type="text/css">
.imgPlace{ position:relative; top:5px; left:5px;/*right:5px;bottom:5px*/}
/*position:relative是相对定位的意思; top是相对离上面的距离,left是相对离左面的距离,right是相对离右面的距离,bottom是相对离下面的距离,*/
</style>

<img src="...." alt=" " title=" " class="imgPlace" />
 本回答被提问者采纳
wang89657dd    |  推荐于2017-09-02 13:29:37
举报|  评论 
25  4
这个效果你先研究一下Actionscript语言吧,和java类似。
可惜我不太懂。大概是这样:
输出鼠标的坐标,再将地图那个图片设置为向那个位置移动,移动速度以及按照那个弧度可以设置。
这个效果的脚本是可以实现的。
回去先学flash里面的脚本吧,也就是Actionscript

鼠标跟随效果吗?

去下代码研究一下吧。好多书里面都当脚本案例用,可以我没认真看...

个你找点资料吧!

http://zhidao.baidu.com/question/28497590.html?si=3
15955501115    |  发布于2008-12-16 18:05
举报|  评论 
0  6
不明白你说什么!
高速车王    |  发布于2008-12-16 18:05
举报|  评论 
0  7
主要是你想怎么移动,移动他的div的话给他的margin设定数值就行了,很多种方法的,主要是看你的需求,margin,padding 或者定义position,都可以,这是一些教程,你看看吧,希望能帮到你
Dw基础视频:http://www.iqiyi.com/playlist388411202.html

DW网页案例 http://www.iqiyi.com/playlist301527502.html
  • 15
    点赞
  • 46
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用Konva的拖拽事件和Konva的图层管理方式来实现。具体实现步骤如下: 1. 在Vue3中安装Konva和Konva-Vue插件,可以通过npm安装: ``` npm install konva konva-vue --save ``` 2. 创建一个Konva的舞台和一个图层,将图层添加到舞台中: ```html <template> <div> <v-stage :config="stageSize"> <v-layer ref="layer"> <!-- 在这里添加图片 --> </v-layer> </v-stage> </div> </template> <script> import { Stage, Layer } from 'konva' import { VStage, VLayer } from 'konva-vue' export default { components: { VStage, VLayer }, data() { return { stageSize: { width: 500, height: 500 } } }, mounted() { // 创建一个Konva的舞台和一个图层 const stage = new Stage({ container: this.$refs.stage, width: this.stageSize.width, height: this.stageSize.height }) const layer = new Layer() // 将图层添加到舞台中 stage.add(layer) } } </script> ``` 3. 添加图片到图层中,并为图片添加拖拽事件: ```html <template> <div> <v-stage :config="stageSize" ref="stage"> <v-layer ref="layer"> <v-image v-for="(image, index) in images" :key="index" :config="image.config" :draggable="true" @dragend="handleDragEnd(image, index)" /> </v-layer> </v-stage> </div> </template> <script> import { Stage, Layer, Image } from 'konva' import { VStage, VLayer, VImage } from 'konva-vue' export default { components: { VStage, VLayer, VImage }, data() { return { stageSize: { width: 500, height: 500 }, images: [ { id: 1, config: { x: 50, y: 50, width: 100, height: 100, image: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg' } }, { id: 2, config: { x: 200, y: 200, width: 100, height: 100, image: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg' } }, { id: 3, config: { x: 350, y: 350, width: 100, height: 100, image: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg' } } ] } }, mounted() { // 创建一个Konva的舞台和一个图层 const stage = new Stage({ container: this.$refs.stage, width: this.stageSize.width, height: this.stageSize.height }) const layer = new Layer() // 添加图片到图层中 this.images.forEach(image => { layer.add(new Image(image.config)) }) // 将图层添加到舞台中 stage.add(layer) }, methods: { handleDragEnd(image, index) { const layer = this.$refs.layer.getStage() // 判断是否移动到舞台外 const imageNode = layer.findOne(`#${image.id}`) const imagePosition = imageNode.getAbsolutePosition() if (imagePosition.x < 0 || imagePosition.y < 0 || imagePosition.x > this.stageSize.width || imagePosition.y > this.stageSize.height) { // 移动到舞台外,将该图片从图层中删除 imageNode.destroy() // 将组中的下一个图片移动到该图片位置 if (index + 1 < this.images.length) { const nextImage = this.images[index + 1] const nextImageNode = layer.findOne(`#${nextImage.id}`) nextImageNode.setAbsolutePosition(imagePosition) } // 删除该图片 this.images.splice(index, 1) } } } } </script> ``` 在这个例子中,我们为图片添加了一个`handleDragEnd`方法,用于处理图片拖动结束后的逻辑。当图片移动到舞台外时,我们将该图片从图层中删除,并将组中的下一个图片移动到该图片位置。如果没有下一个图片,则不需要移动。最后,我们从组中删除该图片
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值