新闻自动滚动"/>
javascript 实现新闻自动滚动
html代码
<body><div class="level1"><div class="parent" id="parent"><div class="scroll-one" id="scroll-one"><ul><li>第1行</li><li>第2行</li><li>第3行</li><li>第4行</li><li>第5行</li><li>第6行</li><li>第7行</li><li>第8行</li></ul></div><div class="scroll-two"><ul><li>第1行</li><li>第2行</li><li>第3行</li><li>第4行</li><li>第5行</li><li>第6行</li><li>第7行</li><li>第8行</li></ul></div></div></div>
</body>
css代码
.level1 {width: 1000px;height: 500px;border: red 1px solid;display: flex;flex-direction: column;align-items: center;justify-content: center;}.parent {width: 50%;height: 50%;background-color: aqua;overflow: hidden; /*必须*/}ul li {height: 30px;list-style: none;}
注意：父级元素必须设置为overflow: hidden;
Js代码
<script>var init = function () {var parent = document.getElementById("parent");var scrollone = document.getElementById("scroll-one");console.log(parent.scrollTop)console.log(scrollone.offsetHeight)setInterval(function () {if (parent.scrollTop > scrollone.offsetHeight) {parent.scrollTop = 0;} else {parent.scrollTop++;}}, 100);}init();
</script>
根据父级元素的scrollTop值和子元素的offsetHeight值来改变父元素的scrollTop,以实现滚动效果。
注意：浏览器的滚轮缩放网页大小会影响到滚动的效果，可以调节 parent.scrollTop++;以达到合适的滚动速度
更多推荐
javascript 实现新闻自动滚动
发布评论