首页 > 软件开发 > HTML >

html如何将图片右移

来源:互联网 2023-03-16 19:11:38 473

如何在html网页中将图片右移?在回答这个问题前,需要先弄清楚右移的方式:右移动画还是右移一次,还是可控的右移?下面小编就针对三种情况做简单的介绍!ZAF办公区 - 实用经验教程分享!

方法/步骤

  • 1

    首先,我们准备一个简单的网页用于测试使用。在记事本中输入以下代码:ZAF办公区 - 实用经验教程分享!

    html>ZAF办公区 - 实用经验教程分享!

    img src="1.jpg" width="120" height="180" />ZAF办公区 - 实用经验教程分享!

    br />ZAF办公区 - 实用经验教程分享!

    img src="1.jpg" width="120" height="180" />ZAF办公区 - 实用经验教程分享!

    /html>ZAF办公区 - 实用经验教程分享!

    这代码并不规范,仅用于演示,实际过程中请自行完善。ZAF办公区 - 实用经验教程分享!

    然后依次点击“文件”——"保存",保存文件名为:index.html,保存类型为所有文件。ZAF办公区 - 实用经验教程分享!

    html如何将图片右移ZAF办公区 - 实用经验教程分享!

    html如何将图片右移ZAF办公区 - 实用经验教程分享!

  • 2

    双击打开保存的index.html文件,浏览器中的效果如图所示:ZAF办公区 - 实用经验教程分享!

    html如何将图片右移ZAF办公区 - 实用经验教程分享!

  • 3

    1.利用marquee标签右移ZAF办公区 - 实用经验教程分享!

    针对第一种情况,我们可以利用marquee标签来实现图片循环右移。ZAF办公区 - 实用经验教程分享!

    修改第一个图像的代码:ZAF办公区 - 实用经验教程分享!

    marquee direction="right">ZAF办公区 - 实用经验教程分享!

    img src="1.jpg" width="120" height="180" />ZAF办公区 - 实用经验教程分享!

    /marquee>ZAF办公区 - 实用经验教程分享!

    html如何将图片右移ZAF办公区 - 实用经验教程分享!

  • 4

    保存后,在浏览器中打开,运行效果如下:ZAF办公区 - 实用经验教程分享!

    html如何将图片右移ZAF办公区 - 实用经验教程分享!

  • 5

    2.利用CSS样式右移ZAF办公区 - 实用经验教程分享!

    针对第二种情况,可以利用css样式来让图片在原来位置的基础上向右偏移给定值距离。ZAF办公区 - 实用经验教程分享!

    修改第一张图片代码如下:ZAF办公区 - 实用经验教程分享!

    img src="1.jpg" width="120" height="180" style="position:relative;left:10px;" />ZAF办公区 - 实用经验教程分享!

    style="position:relative;left:10px;" 表示图像在原有位置的基础上向右移动10PX。ZAF办公区 - 实用经验教程分享!

    html如何将图片右移ZAF办公区 - 实用经验教程分享!

  • 6

    保存修改后,在浏览器打开,运行效果如下:ZAF办公区 - 实用经验教程分享!

    html如何将图片右移ZAF办公区 - 实用经验教程分享!

  • 7

    3.利用js CSS样式实现可控右移ZAF办公区 - 实用经验教程分享!

    原理同CSS样式一样,只是可用JS来控制右移的距离。ZAF办公区 - 实用经验教程分享!

    修改代码如下:ZAF办公区 - 实用经验教程分享!

    html>ZAF办公区 - 实用经验教程分享!

    script language="javascript">ZAF办公区 - 实用经验教程分享!

    var mx=10;ZAF办公区 - 实用经验教程分享!

    function MoveRight()ZAF办公区 - 实用经验教程分享!

    {ZAF办公区 - 实用经验教程分享!

    mx =10;ZAF办公区 - 实用经验教程分享!

    document.getElementById("img1").style.left=mx "px";ZAF办公区 - 实用经验教程分享!

    }ZAF办公区 - 实用经验教程分享!

    /script>ZAF办公区 - 实用经验教程分享!

    ZAF办公区 - 实用经验教程分享!

    img id="img1" src="1.jpg" width="120" height="180" style="position:relative;"/>ZAF办公区 - 实用经验教程分享!

    br />ZAF办公区 - 实用经验教程分享!

    img src="1.jpg" width="120" height="180" />ZAF办公区 - 实用经验教程分享!

    input type="button" value="右移10PX" onclick="MoveRight()"/>ZAF办公区 - 实用经验教程分享!

    /html>ZAF办公区 - 实用经验教程分享!

    html如何将图片右移ZAF办公区 - 实用经验教程分享!

  • 7该信息未经许可获取自百度经验
  • 8

    保存后,在浏览器中打开,每点击一个按钮,图片在当前的位置上右移10PX。ZAF办公区 - 实用经验教程分享!

    html如何将图片右移ZAF办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!ZAF办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码