随着html中的标签marquee不在被W3C作为标准采纳，在可遇见的未来也会慢慢的被各大浏览器抛弃，直至废弃，为什么被废弃呢，经过小雨我不辞辛苦的总结有以下几种原因：
- marquee这家伙是微软自己创造出来的，现在火狐都支持了，它自己不干了
- marquee的效果，必须要前一次滚动完成之后，才会接着下一次，会留白很长一段时间，适合无限向上滚动，无限往左有点瑕疵，并且被部分浏览器废弃，会出现兼容性问题
- 最重要的是不能暂停，不能暂停，不能暂停 — 功能不完善
- 搜到了这个啊 —> 就是以后html的规范，只是语意标签，像原来具有样式或者特效功能的标签，比如
<em> <i> <strong>等等都会慢慢废弃
理由够充分吧，是不是被抛弃就合理了，那怎么用js实现这个marquee效果呢，总结了一下，有三中方法：
- css定位，无限向左 left++
- 利用jquery的animate方法
- 利用jquery的scrollLeft方法
3个实现原理是啥呢，其实很简单，只有结构不一样，但是实现方法基本都是一样的
咱们拿css3定位来说明这个例子，首先看html结构：
<div class="scroll_area"> <!--目标体-->
<div class="content"> <!-- 显示容器 -->
<div class="scrolltxt"> <!-- 滚动体 -->
<span>秦时明月汉时关，万里长征人未还1</span>
<span>秦时明月汉时关，万里长征人未还2</span>
</div>
</div>
</div>Demo结构
var obj = $('.scroll_area');
var dw = obj.find(".content").width();
var cw = obj.find(".scrolltxt").width();
var cx = 0;1.首先复制一遍移动体
什么是移动体，就是要滚动的整体，如果横向滚动，则必须用内联标签，咱们这里用span，然后span的父级div即类scrolltxt才是整个移动体
2.制造滚动
什么情况下才能滚动呢，当然是 — 当滚动体的宽度大于显示容器的宽度 — 这样我必须要滚起来，你才能看见全部啊
滚动体为scrolltxt, 显示容器为content，即(".content").width() < (".scrolltxt").width()时才能滚动，否则，不满一屏，当然不能滚动了
3.无限滚动
什么时候才能让滚动体无限滚动下去呢，其实无限滚动就是让目标滚动到最右边即滚动体本身的宽度时，在来一遍嘛，怎么再来一遍这就需要一个技巧了，怎么才能让滚动体滚动到超了滚动体宽度了，还能滚动
延长滚动体-----------> 最简单的就是制造假象，直接全盘复制一遍原滚动体的html，append到最后面，哇，简直太聪明了
看代码：
obj.find(".scrolltxt").eq(0).append(obj.find(".scrolltxt").eq(0).html());无限滚动开始
延长是延长了，但是仅仅是制造假象，仅仅是为了让滚动体超过了原滚动体宽度了还能滚，但是作用仅仅如此而已，滚动超过了，还是要原角登场
所以啊，当滚动超过scrolltxt的宽度时，或者是滚动体的宽度减去显示体的宽度，再加上容器宽度时，原滚动体复位，比较拗口吧，上个图吧：
if (cw > dw) { //宽度超出当前content宽度才滚动
var scrollval = null;//滚动事件变量
obj.find(".scrolltxt").eq(0).append(obj.find(".scrolltxt").eq(0).html());
scrollval = setInterval(function () {
obj.find(".scrolltxt").eq(0).css({
"left": "-" + cx + "px"
})
if (cx > (cw - dw) + dw)
cx = 0;
cx ++;
}, 30);但是细心的人还是能看的出来，对第一屏滚动完时的跳动不能容忍，那就完整的模拟一个marquee，无限循环：
function marquee() {
var dw = $('#rotateWinners').width();
var cw = $('#scrollArea').width();
var cx = 0;
var initX = Math.floor(dw);
if(cw > dw) {
setInterval(function () {
$('#scrollArea').css({
'left': cx + 'px'
});
if(cx < 0) {
if (-cx >= (cw - dw) + dw) {
cx = initX;
}
}
console.log('cx:', cx);
cx --;
}, 50)
}
}好啦，到这里就完美模拟出跑马灯效果了，给大家也附上无限向上滚动，以及animate的实现方法，供大家参考
