通用无缝连续滚动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。

 

 

posted @ 2012-08-01 21:13  rentj  阅读(765)  评论(4)    收藏  举报