當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS文本滚动
<body><div id="scroll-external"><ul id="scroll-inter"><li><a href="#">大漠孤煙直，長河落日圓1</a></li><li><a href="#">大漠孤煙直，長河落日圓2</a></li><li><a href="#">大漠孤煙直，長河落日圓3</a></li><li><a href="#">大漠孤煙直，長河落日圓4</a></li><li><a href="#">大漠孤煙直，長河落日圓5</a></li><li><a href="#">大漠孤煙直，長河落日圓6</a></li><li><a href="#">大漠孤煙直，長河落日圓7</a></li><li><a href="#">大漠孤煙直，長河落日圓8</a></li><li><a href="#">大漠孤煙直，長河落日圓9</a></li><li><a href="#">大漠孤煙直，長河落日圓10</a></li><li><a href="#">大漠孤煙直，長河落日圓11</a></li><li><a href="#">大漠孤煙直，長河落日圓12</a></li></ul></div></body> <style type="text/css">*{margin: 0;padding: 0;}#scroll-external{position: relative;width: 208px;height: 188px;overflow: hidden;}ul{border: 1px solid #00ff00;position: absolute;}ul li{list-style: none;}</style>
<script type="text/javascript">onload=function(){var oDiv = document.getElementById("scroll-external");var oUl = document.getElementById("scroll-inter");var aLi = document.getElementsByTagName("li");var scrollUp = null;oUl.innerHTML += oUl.innerHTML;//將UL的內部HTML代碼累加一次oUl.style.height = aLi[0].offsetHeight * aLi.length + "px";//實際高度等于任意一個LI高度與其數量相乘，注意需要指定單位。 scrollUp = setInterval(function(){if(oUl.offsetTop < -oUl.offsetHeight/2){//當UL向上滾動到兩倍高度的一半時將其拉回縱坐標為0的位置，重新滾動oUl.style.top = "0";}oUl.style.top = oUl.offsetTop - 4 + "px";},100);oDiv.onmouseover = function(){clearInterval(scrollUp);}oDiv.onmouseout = function(){scrollUp = setInterval(function(){if(oUl.offsetTop < -oUl.offsetHeight/2){oUl.style.top = "0";}oUl.style.top = oUl.offsetTop - 4 + "px";},100);}}</script>
如果制作圖片輪播向左偏移的效果，可以照葫蘆畫瓢，只需將height改為top等等
轉載于:https://www.cnblogs.com/wangyeye14/p/6649898.html
總結
- 上一篇： Nokia G10 确认可升级安卓 13
- 下一篇： 上古卷轴5炼金配方最值钱的有哪些(上古小