间歇、无缝滚动效果(用gif录制的效果不是很好,有兴趣的可以down代码),具体内容如下
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style> *{margin:0;padding:0;} .box{width: 500px;height: 400px;margin:40px auto;background: #ccc;overflow: hidden;} .block{position: relative;width: 500px;height: 400px;overflow: hidden;} .item{height: 40px;background: red;color: #fff;line-height: 40px;text-align: center;} .item:nth-child(2n){background: #000} </style> <script> var scrollUp=(function(){ return function(json){ var objScroll = document.getElementById(json.id); objScroll.scrollTop = 0; objScroll.innerHTML += objScroll.innerHTML; if(json.on){ function scrollIng(){ if(objScroll.scrollTop >= objScroll.scrollHeight) { objScroll.scrollTop = 0; }else{ objScroll.scrollTop ++; } } var myScroll = setInterval(function(){scrollIng()},30); objScroll.onmouseover = function(){ clearInterval(myScroll); } objScroll.onmouseout = function(){ myScroll = setInterval(function(){scrollIng()},30); } }else{ var timer; function startScroll(){ timer=setInterval(function(){scrollUp()},30); objScroll.scrollTop++; } function scrollUp(){ if(objScroll.scrollTop % json.height==0){ clearInterval(timer); setTimeout(startScroll,2000); }else{ objScroll.scrollTop++; if(objScroll.scrollTop >= objScroll.scrollHeight/2){ objScroll.scrollTop =0; } } } setTimeout(startScroll,1000); } } })() window.onload=function(){ //on:间歇滚动/无缝滚动 height:间歇滚动的高度 scrollUp({on:true,id:'block'}); scrollUp({id:'block2',height:120}); } </script> </head> <body> <div class="box"> <div class="block" id="block"> <div class="item">1无缝滚动</div> <div class="item">2无缝滚动</div> <div class="item">3无缝滚动</div> <div class="item">4无缝滚动</div> <div class="item">5无缝滚动</div> <div class="item">6无缝滚动</div> <div class="item">7无缝滚动</div> <div class="item">8无缝滚动</div> <div class="item">9无缝滚动</div> <div class="item">10无缝滚动</div> <div class="item">11无缝滚动</div> <div class="item">12无缝滚动</div> <div class="item">13无缝滚动</div> <div class="item">14无缝滚动</div> <div class="item">15无缝滚动</div> </div> </div> <div class="box"> <div class="block" id="block2"> <div class="item">1间歇滚动</div> <div class="item">2间歇滚动</div> <div class="item">3间歇滚动</div> <div class="item">4间歇滚动</div> <div class="item">5间歇滚动</div> <div class="item">6间歇滚动</div> <div class="item">7间歇滚动</div> <div class="item">8间歇滚动</div> <div class="item">9间歇滚动</div> <div class="item">10间歇滚动</div> <div class="item">11间歇滚动</div> <div class="item">12间歇滚动</div> <div class="item">13间歇滚动</div> <div class="item">14间歇滚动</div> <div class="item">15间歇滚动</div> </div> </div> </body> </html>
注意点:
1.盒子块要css 溢出隐藏:overflow:hidden
2.有两个功能:间歇滚动/无缝滚动
3.先复制一块一模一样的代码,无缝滚动:执行定时器一直增加scrollTop值,当scrollTop值大于盒子高度,在设置scrollTop为0,重新来过。间歇滚动在此基础上加了setTimeout,间歇执行,在scrollTop到达指定的height停止
4.疑问:代码中setInterval(function(){scrollIng()},30);这样写才可以执行,setInterval('scrollIng()',30);这样就不行,有没有大神指导下,两者有啥区别?是啥机制?
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《神话时代:重述版》评测:粉丝们的朝花夕拾
- 战锤40K星际战士2先锋职业介绍|先锋职业技能效果一览
- 战锤40K星际战士2重装职业介绍|重装职业技能效果一览
- 交错战线能源发电站推荐角色一览
- 阿波罗乐神之音《第4集出埃及记》[WAV+CUE]
- JohnWrightTrio-SouthSideSoul-1960-2024(24-192)
- AnthonyBruno-Cefalu(2024)[24-96]
- 《地狱潜者2》玩家人数飙升:终于不再削弱玩家了
- 黑神话引力!外媒分享孙悟空英文书籍:美生中国人等
- 《荒野大镖客》PC版曝光!《GTA6》疑似也有PC版
- 林宥嘉.2008-神秘嘉宾(引进版)【华研国际】【WAV+CUE】
- 徐小凤.1997-金曲精选(康艺经典珍藏系列)【康艺成音】【WAV+CUE】
- 群星.1994-非常精丫宝丽金】【WAV+CUE】
- 《赛马娘 热血喧闹大感谢祭!》评测:现代复古派对
- 《星球大战:亡命之徒》评测:还是看看远方的光剑吧