7

我想将图像插入选取框标签。

我写了以下代码：

<marquee scrollamount="4" behavior="alternate" direction="right" width="300"><img width="180px" style="padding-left:30px;opacity:0.7" src="img/cloud3.png"></marquee>

它在 Firefox 和 IE 中运行良好，但在 chrome 中无法运行。问题是什么。？请尽快回复。提前致谢。

4

6 回答 6

20

因为marquee标签是对自然的犯罪。并且在较新版本的 Chrome 中不再支持它。

于 2013-05-06T05:58:59.660 回答
10

现代marqueehtml 不支持。Chrome 不久前放弃了对它的支持。您需要通过 CSS3 或 Javascript 来实现它。

W3C 进一步声明它是非标准的，不应使用。

效果可以通过jQuery或CSS3轻松实现

于 2013-05-06T05:34:03.030 回答
4

该marquee元素有不同的实现，部分原因是它没有发布的规范。在 HTML5 中，元素被精确定义，HTML5 草案需要支持marquee那里定义的内容。（草案还声明它“过时”和“不合格”，但这只是他们对作者说的；对实现的要求是不同的。）但是，在支持方面仍然存在限制和差异，请参见例如MDN onmarquee。

在这种情况下，似乎不是图像，而是behavior="alternate"导致问题的属性。如果您删除它，图像也会在 Chrome 上移动。

这显然是实现错误而不是缺乏支持。在 Chrome 中检查 DOM 显示该behavior属性具有alternate指定的值，但它不起作用。如果您marquee在 CSS 中为元素添加边框，则图像开始交替移动，但仅左右移动几个像素。

如果你真的改变方向，最好使用其他一些技术来代替marquee. 例如，可以使用 JavaScript 实现简单的运动图像，使用计时器循环更改位置，然后您也可以轻松实现交替方向。或者，可能更简单但不那么健壮（由于浏览器支持有限），您可以使用 CSS3 动画。

于 2013-05-06T08:24:50.873 回答
2

HTML：

<div id="cloud">image</div>

CSS：

    #cloud{
        width:180px;
        padding-left:30px;
        opacity:0.7;
        animation:slide 10s infinite;
        -moz-animation:slide 10s infinite;//Firefox
        -webkit-animation:slide 10s infinite;//chrome and safari
        -o-animation: slide 10s infinite;//Opera   
}

@keyframes slide{
    0%   {-transform: translate(0px, 0px); }
        100% {-transform: translate(500px,0px); }
}    

@-moz-keyframes spin{
    0%   {-moz-transform: translate(0px, 0px); }
    100% {-moz-transform: translate(500px, 0px); }
}

@-webkit-keyframes slide{
         0%   {-webkit-transform: translate(0px, 0px); }
        100% {    -webkit-transform: translate(500px,0px); }
    }

@-o-keyframes slide{
    0%   {-o-transform: translate(0px, 0px); }
    100% {-o-transform: translate(500px, 0px); }
}

这是小提琴：

http://jsfiddle.net/qCahH

用图片替换文字。

于 2013-05-06T06:57:15.187 回答
0

Marquee 已被弃用，因此将在不同的浏览器上显示未指定的行为。

于 2013-05-06T05:37:04.987 回答
0

谁说没有？
在 Chromium 83.0.4103.61（官方构建）上构建在 Ubuntu 上，在 Ubuntu 18.04（64 位）上运行，它可以完美运行。

不过，没有在 Chrome 上测试。

于 2020-06-05T18:20:43.477 回答