学习 准备 尝试 谨慎小心

0%

文本过长自动滚动

发表于 更新于 分类于 ，

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

文本过长自动滚动)百度

有以下两点限制：

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

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

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

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

父元素要设置 overflow: hidden ，以便能够隐藏子元素超出内容。但是子元素不能够设置 overflow: hidden ，因为子元素设置了该属性，那么子元素的 clientWidth 就和 scrollWidth 相等了。
百度
下面是源码，复制即可运行。

1
<!doctype html>
2
<html lang="zh">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>文本过长自动滚动</title>
6
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
7
    <style type="text/css">
8
        * {
9
            margin: 0;
10
            padding: 0;
11
        }
12
        #parentEle {
13
			margin: 0 auto;
14
			border: 1px solid blue;
15
			/* 固定宽度 */
16
            width: 100px;
17
			/* 超过宽度自动隐藏 */
18
            overflow: hidden;
19
        }
20
		#sonEle {
21
			/* 相对位置 */
22
			position: relative;
23
			/* 不能自动换行 */
24
			white-space: nowrap;
25
		}
26
    </style>
27
</head>
28
<body>
29
    <div id="parentEle">
30
        <div id="sonEle">
31
            春草带雨晚来急，野渡无人舟自横
32
        </div>
33
    </div>
34
    <script>
35
    	$(function(){
36
            var sonEle = document.querySelector("#sonEle");
37
			// 子元素实际内容长度超过可视区宽度
38
            if (sonEle.scrollWidth > sonEle.clientWidth) {
39
                var d = sonEle.scrollWidth - sonEle.clientWidth;
40
				$(sonEle).animate({left: -d +'px'}, 3000);
41
                $(sonEle).animate({left:'0px'}, 3000);
42
                setInterval(function(){
43
                    $(sonEle).animate({left: -d +'px'}, 3000);
44
                    $(sonEle).animate({left:'0px'}, 3000);
45
                }, 6000);
46
            }
47
        })
48
    </script>
49
</body>
50
</html>