列表内容自动向上滚动(原生JS)
2019-05-22 06:35:08来源:博客园 阅读 ()
1 <div id="review_box"> 2 <ul id="comment1"> 3 <li>第一条</li> 4 <li>第二条</li> 5 <li>第三条</li> 6 <li>第四条</li> 7 <li>第五条</li> 8 <li>第六条</li> 9 </ul> 10 <ul id="comment2"></ul> 11 </div>
CSS:
1 * { 2 margin: 0; 3 padding: 0; 4 } 5 div { 6 width: 100px; 7 height: 63px; /* 必须 */ 8 overflow: hidden;/* 必须 */ 9 margin: 50px auto; 10 border: 1px solid red; 11 text-align: center; 12 } 13 ul { 14 list-style: none; 15 }
JavaScript:
1 window.onload = roll(50); 2 3 function roll(t) { 4 var ul1 = document.getElementById("comment1"); 5 var ul2 = document.getElementById("comment2"); 6 var ulbox = document.getElementById("review_box"); 7 ul2.innerHTML = ul1.innerHTML; 8 ulbox.scrollTop = 0; // 开始无滚动时设为0 9 var timer = setInterval(rollStart, t); // 设置定时器,参数t用在这为间隔时间(单位毫秒),参数t越小,滚动速度越快 10 // 鼠标移入div时暂停滚动 11 ulbox.onmouseover = function () { 12 clearInterval(timer); 13 } 14 // 鼠标移出div后继续滚动 15 ulbox.onmouseout = function () { 16 timer = setInterval(rollStart, t); 17 } 18 } 19 20 // 开始滚动函数 21 function rollStart() { 22 // 上面声明的DOM对象为局部对象需要再次声明 23 var ul1 = document.getElementById("comment1"); 24 var ul2 = document.getElementById("comment2"); 25 var ulbox = document.getElementById("review_box"); 26 // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0 27 if (ulbox.scrollTop >= ul1.scrollHeight) { 28 ulbox.scrollTop = 0; 29 } else { 30 ulbox.scrollTop++; 31 } 32 }
*有错误的地方欢迎指正
*转载请注明出处
原文链接:https://www.cnblogs.com/tyouu/p/10904415.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 鼠标悬浮停留三秒后自动显示大图js代码 2020-02-21
- nodejs的express自动生成项目框架的方法 2020-02-20
- input标签内容改变的触发事件介绍 2019-11-27
- Div自动滚动到末尾的代码 2019-11-23
- 刷新时清空文本框内容的js代码 2019-11-08
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash