文本过长自动滚动

吴钢剑

已于 2024-03-04 14:16:30 修改

阅读量402

点赞数 11

文章标签： javascript 前端开发语言

于 2024-01-21 13:39:55 首次发布

本文链接：https://blog.csdn.net/pirenyu2701/article/details/135728653

版权

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文本过长自动滚动</title>
    <script src="/js/jquery-1.11.3.min.js"></script>
    <style type="text/css">
        #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>