网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索 电影文章

文章热门排行随机文章推荐文章

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

关注我吧
 2013/7/15 9:29:44 阅读次数:16474

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"));
}

好了。希望能帮到你们!


大家有什么问题或技术上的想法可以在此与大家分享,也可以点击链接加入群:【幸凡学习网技术交流群】

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

0
无觅相关文章插件,快速提升流量
阅读全文内容关闭