div内实现文字左右循环滚动

最新推荐文章于 2024-05-13 01:06:39 发布

weixin_34068198

最新推荐文章于 2024-05-13 01:06:39 发布

阅读量4.6k

点赞数

文章标签： xhtml javascript python ViewUI

原文链接：https://my.oschina.net/kingchen8080/blog/605758

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!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>

简单的例子就不需要解释什么了。

转载于:https://my.oschina.net/kingchen8080/blog/605758