JS实现文字向上无缝滚动轮播
来源:互联网 发布:电子表格数据对比 编辑:程序博客网 时间:2024/04/30 18:38
效果图:
全部代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{margin: 0;padding: 0} #box{height: 140px; border: solid 1px; overflow: hidden;} </style></head><body> <div id="box"> <ul id="ul1"> <li>1111111111111111111111</li> <li>2222222222222222222222</li> <li>3333333333333333333333</li> <li>4444444444444444444444</li> <li>5555555555555555555555</li> <li>6666666666666666666666</li> <li>7777777777777777777777</li> <li>8888888888888888888888</li> <li>9999999999999999999999</li> </ul> <ul id="ul2"></ul> </div> <script> window.onload = roll(50); function roll(t) { var ul1 = document.getElementById("ul1"); var ul2 = document.getElementById("ul2"); var box = document.getElementById("box"); ul2.innerHTML = ul1.innerHTML; box.scrollTop = 0; var timer = setInterval(rollStart, t); box.onmouseover = function () { clearInterval(timer) } box.onmouseout = function () { timer = setInterval(rollStart, t); } } function rollStart() { if (box.scrollTop >= ul1.scrollHeight) { box.scrollTop = 0; } else { box.scrollTop++; } } </script></body></html>
阅读全文
0 0
- JS实现文字向上无缝滚动轮播
- 文字从上到下无缝轮播,一直循环滚动轮播
- Android自定义控件实现多行文字自动向上滚动轮播效果(伪文字轮播)
- Android消息播报向上滚动轮播的实现
- 手写无缝滚动轮播图
- js实现文字向上无缝滚动
- html滚动轮播实现
- js实现文字无缝向上轮播
- js实现文字无缝轮播
- iOS 无缝连接滚动轮播图的一种实现思路
- 编写可复用的无缝滚动轮播图
- 原生javascript写的无缝滚动轮播图
- js连续滚动轮播原理
- HTML_用参数判断轮播-小标签-文字图片轮播-第一挪到最后的无缝滚动轮播
- UIDatePickerView实现时间滚动轮播效果
- iOS 上下滚动轮播的实现
- Android中TextView实现文字跑马灯效果(滚动轮播)
- 上下滚动轮播
- CSS书写规范与理论
- HDU 1241 Oil Deposits 深搜(DFS)
- Failed to parse mapping resource......
- react-native调起第三方高德地图导航URL解释
- 关于IDEA 创建WebService实例访问404问题的解决
- JS实现文字向上无缝滚动轮播
- JavaScript、jQuery、AJAX、JSON 之间的关系
- 用C++实现2048
- Dubbo入门
- 数据类型和运算符 例题 stage1-7
- Python的异常处理
- PHP 暂停函数 sleep() 与 usleep() 的区别
- 《算法艺术与信息学竞赛》之 排序与检索 二分 URAL 1184 电缆
- Android 自定义View合集