<!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>
文本过长自动滚动
于 2024-01-21 13:39:55 首次发布