當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
JS文本滚动
<body><div id="scroll-external"><ul id="scroll-inter"><li><a href="#">大漠孤煙直，長(zhǎng)河落日?qǐng)A1</a></li><li><a href="#">大漠孤煙直，長(zhǎng)河落日?qǐng)A2</a></li><li><a href="#">大漠孤煙直，長(zhǎng)河落日?qǐng)A3</a></li><li><a href="#">大漠孤煙直，長(zhǎng)河落日?qǐng)A4</a></li><li><a href="#">大漠孤煙直，長(zhǎng)河落日?qǐng)A5</a></li><li><a href="#">大漠孤煙直，長(zhǎng)河落日?qǐng)A6</a></li><li><a href="#">大漠孤煙直，長(zhǎng)河落日?qǐng)A7</a></li><li><a href="#">大漠孤煙直，長(zhǎng)河落日?qǐng)A8</a></li><li><a href="#">大漠孤煙直，長(zhǎng)河落日?qǐng)A9</a></li><li><a href="#">大漠孤煙直，長(zhǎng)河落日?qǐng)A10</a></li><li><a href="#">大漠孤煙直，長(zhǎng)河落日?qǐng)A11</a></li><li><a href="#">大漠孤煙直，長(zhǎng)河落日?qǐng)A12</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的內(nèi)部HTML代碼累加一次oUl.style.height = aLi[0].offsetHeight * aLi.length + "px";//實(shí)際高度等于任意一個(gè)LI高度與其數(shù)量相乘，注意需要指定單位。 scrollUp = setInterval(function(){if(oUl.offsetTop < -oUl.offsetHeight/2){//當(dāng)UL向上滾動(dòng)到兩倍高度的一半時(shí)將其拉回縱坐標(biāo)為0的位置，重新滾動(dòng)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>
如果制作圖片輪播向左偏移的效果，可以照葫蘆畫(huà)瓢，只需將height改為top等等
轉(zhuǎn)載于:https://www.cnblogs.com/wangyeye14/p/6649898.html
總結(jié)
- 上一篇： Nokia G10 确认可升级安卓 13
- 下一篇： Spring实战——缓存