我正在寻找一种使用javascript(如果可能的话是jquery)来解决单行Marquee水平文本滚动的解决方案。就像一个轮播文本滚动。所有的谷歌搜索都给了我滚动效果,但没有褪色效果。
我知道这可以在闪存中完成,但如果有其他解决方案,我会避免它。
任何帮助将不胜感激。
我正在寻找一种使用javascript(如果可能的话是jquery)来解决单行Marquee水平文本滚动的解决方案。就像一个轮播文本滚动。所有的谷歌搜索都给了我滚动效果,但没有褪色效果。
我知道这可以在闪存中完成,但如果有其他解决方案,我会避免它。
任何帮助将不胜感激。
<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>
一种方法是创建一个选取框并在其边缘浮动一个半透明图像:
你找到的任何一个都很好,或者使用这个内置的 jQuery:http ://remysharp.com/demo/marquee.html
这是一个褪色的图像: http: //www.collylogic.com/scripts/fade.png
这是您可以实际看到的来源 查看上图的褪色效果
这样做的好处是您无需在 javascript 中进行任何昂贵的处理。您还可以选择更多种类的滚动,而不必担心何时或何处消失。
缺点是半透明的 png 需要 hack 才能在 IE6 中工作。但由于它只是养眼,我想那少数 IE6 用户不会受到太大影响。