如何使图片在网站上移动或连续移动

How to make pictures move or give a continuous motion on websites?

本文关键字：移动 连续 网站 何使图      更新时间：2023-09-26

如何使用相同宽度和高度的图像在屏幕上从左到右或从右到左连续移动。喜欢这个页面-https://www.reddit.com/r/Nisekoi/

您可以为此使用任一Marquee/css key frames/Javascript implementations。但最简单的方法是使用marquee或css

<img class='marquee' src='http://sstatic.net/stackexchange/img/logos/so/so-logo-med.png'>

css

.marquee { 
  overflow: hidden;
  position: relative;
  animation: MarqueeLeft linear 18s infinite;
}
@keyframes MarqueeLeft 
{
  0% { right: -100% }
  100% { right: 100% }
}

并带有招牌

<marquee direction="left">
    <img  src='http://sstatic.net/stackexchange/img/logos/so/so-logo-med.png'>
 </marquee>

检查小提琴http://jsfiddle.net/tintucraju/g9t0e3jf/1/

HTML:

 <img scr="myimage" id="theImage">

JavaScript:

 var image = document.getElementById("theImage");
 var imageLeft = 0;
 function move(){
     imageLeft++;
     image.style.left = imageLeft + "px";
 }
 setInterval(move, 0);

应该有效。欢迎光临。

链接获取字幕示例。

<marquee>Default scrolling</marquee>

您可以提供任意数量的图像来代替"默认滚动"文本

相关文章：