多语言展示
当前在线:1436今日阅读:176今日分享:34

html如何将图片右移

如何在html网页中将图片右移?在回答这个问题前,需要先弄清楚右移的方式:右移动画还是右移一次,还是可控的右移?下面小编就针对三种情况做简单的介绍!
方法/步骤
1

首先,我们准备一个简单的网页用于测试使用。在记事本中输入以下代码:          
    这代码并不规范,仅用于演示,实际过程中请自行完善。然后依次点击“文件”——'保存',保存文件名为:index.html,保存类型为所有文件。

2

双击打开保存的index.html文件,浏览器中的效果如图所示:

3

1.利用marquee标签右移针对第一种情况,我们可以利用marquee标签来实现图片循环右移。修改第一个图像的代码:         

4

保存后,在浏览器中打开,运行效果如下:

5

2.利用CSS样式右移针对第二种情况,可以利用css样式来让图片在原来位置的基础上向右偏移给定值距离。修改第一张图片代码如下:style='position:relative;left:10px;' 表示图像在原有位置的基础上向右移动10PX。

6

保存修改后,在浏览器打开,运行效果如下:

7

3.利用js+CSS样式实现可控右移原理同CSS样式一样,只是可用JS来控制右移的距离。修改代码如下:

8

保存后,在浏览器中打开,每点击一个按钮,图片在当前的位置上右移10PX。

推荐信息