2013-05-06 2 views
4

Я хочу вставить изображение в тег marquee.почему ярлык marquee не работает в Google Chrome.?

Я написал следующий код:

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

Its работает отлично в Firefox и IE, но не работает в хроме. В чем проблема.? Пожалуйста, ответьте как можно раньше. Спасибо заранее.

+1

Когда вы говорите, что эта функция «не работает», что именно вы имеете в виду? Для этого существует много разных значений. Чтобы помочь понять проблему у других пользователей, попробуйте добавить код или [jsFiddle] (http://jsfiddle.net), чтобы помочь. –

+0

Я могу видеть только изображение, но это не прокрутка. –

+0

**** Используется для jScroller ** ** ** [jScroller Link] (http://jscroller2.markusbordihn.de/example/) ** –

ответ

7

marquee не поддерживается в современном html. Некоторое время назад Chrome отказался от поддержки. Вам нужно реализовать это через CSS3 или Javascript.

Далее W3C заявляет, что это non standard и не должен использоваться.

Эффект может быть легко достигнуто с помощью jQuery или через CSS3

+0

Вы можете помочь мне в том, как использовать его в css3 или javascript .. –

+0

См. Обновленный ответ – zellio

0

Marquee устарела, так будет отображаться неопределенное поведение на разных браузерах.

16

Потому что тег marquee является преступлением против природы. И он больше не поддерживается в новых версиях Chrome.

+0

Он пытается создать скроллер изображений, который, я считаю, также является преступлением против природы, но, возможно, не так много, но это довольно часто. –

+4

+1 за «преступление против природы» – sevenseacat

+4

Я нахожу этот ответ довольно мягким. Тег 'marquee', вероятно, никогда не был создан, но с веб-компонентами кто-то может легко создать новый тег 'marquee' сегодня. Дело в том, что html - это не семантика, а не презентация. 'marquee' решает, как что-то должно отображаться не в виде информации. Конечный результат тега 'marquee' - это не то, что здесь плохо. Так оно и создается, это плохо. HTML не должен быть частью презентации, вот что случилось с 'marquee'. – stenehall

0

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

Заменить текст с изображением.

1

Элемент marquee имеет различные реализации, отчасти потому, что для него не было опубликованной спецификации. В HTML5 элемент точно определяется, а для черновиков HTML5 требуется поддержка marquee as defined there. (Чертежи также заявляют об этом «устаревшим» и «несоответствующим», но это только то, что они говорят авторам; требования к реализациям различны.) Однако все еще существуют ограничения и различия в поддержке, см., Например, MDN on marquee.

В этом случае это не изображение, а атрибут behavior="alternate", который вызывает проблему. Если вы удалите его, изображение также будет перемещаться по Chrome.

Это, по-видимому, реализация ошибка, а не отсутствие поддержки. Проверка DOM в Chrome показывает, что свойство behavior имеет значение alternate, как указано, но оно просто не работает. Если вы добавите границу в элемент marquee в CSS, изображение начнет перемещаться поочередно, но всего несколько пикселей вправо и влево.

Если вы действительно чередуете направление, вероятно, лучше использовать какую-либо другую технику вместо marquee. Например, простое движущееся изображение может быть реализовано с использованием JavaScript, так что положение изменяется в цикле, используя таймер, а затем вы также можете легко реализовать переменное направление.Альтернативно, возможно, проще, но не так надежно (из-за ограниченной поддержки браузера), вы можете использовать анимацию CSS3.

Смежные вопросы