js文字无缝左右滚动,可添加多个DIV-幸凡学习网

js文字无缝左右滚动,可添加多个DIV

用声音读出全文

关注我吧

2013/7/15 9:29:44 阅读次数:33842Tags:文字滚动 js 兼容

js文字无缝左右滚动,可添加多个DIV

js文字滚动的代码太多了，但不一定实用，所以继续做了一个无缝滚动的文字，但是这个方法更方便，而且兼容性好。只需要要调用div的ID即可滚动,可重用性更强了。

提醒滚动div的属性必须要定义一个可以滚动的宽度如(width:100px)，然后就是超出隐藏(overflow:hidden;)这两个属性必须同时存在。

下面一则实例可以看到很好的效果

<!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=gb2312" />
<title>文字无缝滚动可添加多个DIV</title>
<script>
(function(ns){  
        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 = 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 + 1;
                  
                if(element.scrollLeft >=  this.contentWidth ) {
                        element.scrollLeft = 0;
                }
            }
        };
    ns.Scroll = Scroll; 
}(window));
window.onload=function(){
	var sc = new Scroll(document.getElementById("scroll"));
	var sc = new Scroll(document.getElementById("scroll2"));
}
</script>
</head>

<body>
<div id="scroll" style="width:500px;border:1px solid #f60;color:red;overflow:hidden;">文字无缝滚动效果文字无缝滚动效果文字无缝滚动效果文字无缝滚动效果</div>
<br />
<div id="scroll2" style="width:500px;border:1px solid #060;color:006;overflow:hidden;">文字无缝滚动效果文字无缝滚动效果文字无缝滚动效果文字无缝滚动效果</div>
</body>
</html>

以上方法可以封装到其它JS文件里面。引用起来也很简单只需要：添加如下代码