liuchuanwei/mynotes: 我的笔记 @ 57c6037fc7b87f6b23399ed10da1723cc85d6b26

当文本内容长度超过容器元素宽度时，要求文本自动滚动，如下图

有以下两点限制：

文本不能全部显示出来，不能超出容器宽度
文本不能自动换行

原理：当子元素的实际内容长度 scrollWith 大于可视区宽度 clientWith 时，利用 position:relative 的属性来对子元素进行左右移动，使子元素的所有内容能够在父元素的可视区宽度内展示出来

就相当于我们透过一个小窗口看窗外经过的火车一样，小窗口是父元素，而经过的火车是子元素

element.clientwidth 表示元素的可视区宽度， element.scrollWidth 表示元素内容宽度

父元素要设置 overflow: hidden ，以便能够隐藏子元素超出内容。但是子元素不能够设置 overflow: hidden ，因为子元素设置了该属性，那么子元素的 clientWidth 就和 scrollWidth 相等了。

下面是源码，复制即可运行。

<!doctype html>
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <title>文本过长自动滚动</title>  
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  
    <style type="text/css">  
        * {  
            margin: 0;  
            padding: 0;  
        }  
        #parentEle {  
			margin: 0 auto;  
			border: 1px solid blue;  
			/* 固定宽度 */  
            width: 100px;  
			/* 超过宽度自动隐藏 */  
            overflow: hidden;  
        }  
		#sonEle {  
			/* 相对位置 */  
			position: relative;  
			/* 不能自动换行 */  
			white-space: nowrap;  
		}  
    </style>  
</head>  
<body>  
    <div id="parentEle">  
        <div id="sonEle">  
            春草带雨晚来急，野渡无人舟自横  
        </div>  
    </div>  
    <script>  
    	$(function(){  
            var sonEle = document.querySelector("#sonEle");  
			// 子元素实际内容长度超过可视区宽度  
            if (sonEle.scrollWidth > sonEle.clientWidth) {  
                var d = sonEle.scrollWidth - sonEle.clientWidth;  
				$(sonEle).animate({left: -d +'px'}, 3000);  
                $(sonEle).animate({left:'0px'}, 3000);  
                setInterval(function(){  
                    $(sonEle).animate({left: -d +'px'}, 3000);  
                    $(sonEle).animate({left:'0px'}, 3000);  
                }, 6000);  
            }  
        })  
    </script>  
</body>  
</html>

css文件超长自动滚动.md 2.4 KB Historique Raw

css文件超长自动滚动.md 2.4 KB

Historique Raw