通用无缝连续滚动JS
无缝连续滚动JS，工作中经常会用到整理出来需要用的时候可以直接拿来用。代码很简单主要就是修改元素的scrollLeft值。需要注意的是获取元素overflow:hidden中内容的真实宽高时，需要先克隆元素并内容设置样式setyle.cssText="position;absolute; visibility:visible;display:block;" 。 然后再使用元素的offsetWidth/offsetWidth属性才可以获取到元素的真实宽高。否则被隐藏部分的宽高无法获取到。
代码：
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<title>通用无缝连续滚动JS(by rentj1@163.com;)</title>
<style>
body{ font-size:12px;}
#scroll{width:500px; overflow:hidden }
.referer{ margin-top:50px;}
</style>
</head>
<body>
<div id="scroll">
<a href="#" target="_blank">关注反弹成交量</a> <font color="#999999">11:22</font>
<a href="#" target="_blank">中信建投期货:关注甲醇60日均线的得失</a> <font color="#999999">11:21</font>
<a href="#" target="_blank">大盘技术性反抽 不宜过分乐观</a> <font color="#999999">11:21</font>
<a href="#" target="_blank">中证期货:PVC市场恐难改低迷</a> <font color="#999999">11:21</font>
</div>
<script>
(function(ns){
//Class Scroll{
/**
* 构造函数
* email: rentj1@163.com;
* @param {HTMLElement} 滚动内容的容器
* @return {Undefined}
*/
function Scroll(element){
var content = document.createElement("div");
var container = document.createElement("div");
var _this =this;
var cssText = "position: absolute; visibility:hidden; left:0; white-space:nowrap;";
this.element = element;
this.contentWidth = 0;
this.stop = false;
content.innerHTML = element.innerHTML;
//获取元素真实宽度
content.style.cssText = cssText;
element.appendChild(content);
this.contentWidth = (getComputedStyle && parseFloat(getComputedStyle(content,null).width)) || content.offsetWidth;
content.style.cssText= "float:left;";
container.style.cssText = "width: " + ((this.contentWidth) * 2) + "px; overflow:hidden";
container.appendChild(content);
container.appendChild(content.cloneNode(true));
element.innerHTML = "";
element.appendChild(container);
container.onmouseover = function(e){
clearInterval(_this.timer);
};
container.onmouseout = function(e){
_this.timer = setInterval(function(){
_this.run();
},20);
};
_this.timer = setInterval(function(){
_this.run();
}, 20);
}
Scroll.prototype = {
run: function(){
var _this = this;
var element = _this.element;
element.scrollLeft = element.scrollLeft + 2;
if(element.scrollLeft >= this.contentWidth ) {
element.scrollLeft = 0;
}
}
};
//}
ns.Scroll = Scroll;
//参考：<br />
//http://www.ilovejs.net/archives/108
}(window));
var elem = document.getElementById("scroll");
var sc = new Scroll(elem);
</script>
</body>
</html>
更新：2012930
代码说明：
this.contentWidth = (getComputedStyle && parseFloat(getComputedStyle(content,null).width)) || content.offsetWidth;
1 在IE9使用 content.offsetWidth获取元素的宽度时，得到值会忽略小数位数，使用 getComputedStyle 可以获取元素的实际宽度。
2 在IE/6/7/8中使用元素的currentStyle属性兼容getComputedStyle 时，如果没有显式指定元素的width,height样式值会返回auto。
