Я ищу решение для одной строки. Строка горизонтального текста Marquee с эффектом затухания с использованием javascript (jquery, если возможно). Как прокрутка текста карусели. Все поисковые запросы Google дали мне прокрутку эффектов, но без эффекта затухания.Отметить горизонтальный текст прокрутки с эффектом затухания?
Я знаю, что это можно сделать во флеше, но я избегаю этого, если есть другие решения.
Любая помощь была бы принята с благодарностью.
Один из способов сделать это путем создания бегущей строки и плавающей полупрозрачные изображения на своем краю:
Любой из тех, которые вы нашли в порядке, или использовать этот встроенный в JQuery: http://remysharp.com/demo/marquee.html
Вот выцветания изображения: http://www.collylogic.com/scripts/fade.png
Вот the source where you can see actually SEE the fading effect на картинке
преимущества делать это таким образом, что вы не делаете любую дорогую обработку в javascri пт. У вас также есть более широкий выбор прокрутки на выбор, не беспокоясь о том, когда и где можно исчезнуть.
Недостатком является то, что полупрозрачные pngs требуют взлома для работы в IE6. Но так как это просто глазные конфеты, я бы предположил, что эти немногие пользователи IE6 не будут сильно затронуты.
<html>
<head>
<style>
#marquee{
position: absolute;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function marqueePlay(){
$("#marquee").animate(
{
left: $(window).width() - $("#marquee").width(),
opacity: 0
}, 10000, function(){
$("#marquee").css("left", 0);
$("#marquee").css("opacity", 1);
marqueePlay();
}
);
}
marqueePlay();
});
</script>
</head>
<body>
<div id="marquee">Weee...Weee...Duh!</div>
</body>
</html>