网页前端设计

http://www.86y.org

搜索文章

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

用声音读出全文关注我吧
 2013/7/15 9:29:44 阅读次数:33181

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文件里面。引用起来也很简单只需要:添加如下代码

window.onload=function() {
var sc = new Scroll(document.getElementById("scroll"));
var sc2 = new Scroll(document.getElementById("scroll2"));
}

好了。希望能帮到你们!


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭