由于ie8不支持html的<marquee>标签了，因此用js创建一个代替它的兼容方案成为必要。我在网络上搜索了许多方案，没有找到一种非常符合web标准的方案，于是自己写了一个，供大家参考。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.scroll_div {
width:614px;
height:24px;
margin:0 auto;
border:1px solid #00f;
}
</style>
<script type="text/javascript" src="js/sizzle.js">http://sizzlejs.com/下载</script>
<script type="text/javascript">
var zh = {};
zh.addLoadEvent = function (func) {
var oldFunc = window.onload;
if (typeof window.onload === 'function'){
window.onload = function (){
oldFunc();
func();
}
}else{
window.onload =func;
}
}
//parm@elem document选择符字符串
//parm@speed optional,滚动速度
zh.textScrollLeft = function (elem,speed){
var speed = speed || 20,
scrollBegin,scrollEnd,scrollContainer,marquee,text;
var i;
console.log(Sizzle(elem).length);
for (i = 0; i<Sizzle(elem).length; i += 1) {
scrollContainer = Sizzle(elem)[i];
(function(scrollContainer){
scrollContainer.style.overflow = 'hidden';
scrollContainer.style.whiteSpace = 'nowrap';
marquee = function (scrollContainer){
if(scrollContainer.scrollLeft < scrollBegin.offsetWidth){
scrollContainer.scrollLeft += 1;
}
else{
scrollContainer.scrollLeft = 0;
}
};
text = scrollContainer.innerHTML;
scrollContainer.innerHTML = '';
scrollBegin = document.createElement('span');
scrollBegin.innerHTML = text;
scrollEnd = scrollBegin.cloneNode(true);
scrollContainer.appendChild(scrollBegin);
scrollContainer.appendChild(scrollEnd);
scrollContainer.Mar = setInterval(function () { marquee(scrollContainer);},speed);
scrollContainer.onmouseover = function() {clearInterval(scrollContainer.Mar)};
scrollContainer.onmouseout = function() { scrollContainer.Mar = setInterval(function () {marquee(scrollContainer)},speed);};
})(scrollContainer);
}
}
zh.addLoadEvent(function(){zh.textScrollLeft('.scroll_div')});
</script>
</head>
<body>
<!--#####滚动区域#####-->
<div class="scroll_div">
@@@@@@@@
setInterval和clearI@@@@@@@@
setInterval和clearI@@@@@@@@
setInterval和clearI@@@@@@@@
setInterval和clearI@@@@@@@@
setInterval和clearI@@@@@@@@
setInterval和clearI
</div>
<div class="scroll_div">
@@@@@@@@
setInterval和clearI@@@@@@@@
setInterval和clearI@@@@@@@@
setInterval和clearI@@@@@@@@
setInterval和clearI@@@@@@@@
setInterval和clearI@@@@@@@@
setInterval和clearI
</div>
<div class="scroll_div">
@@@@@@@@
setInterval和clearI@@@@@@@@
setInterval和clearI@@@@@@@@
setInterval和clearI@@@@@@@@
setInterval和clearI@@@@@@@@
setInterval和clearI@@@@@@@@
setInterval和clearI
</div>
<!--#####滚动区域#####-->
<!--//向左滚动代码结束-->
</body>
</html>
