快捷導(dǎo)航

JS實(shí)現(xiàn)間歇滾動(dòng)的運(yùn)動(dòng)效果實(shí)例

更新時(shí)間：2016年12月22日 08:40:49 作者：hcjavascript

這篇文章主要介紹了JS實(shí)現(xiàn)間歇滾動(dòng)的運(yùn)動(dòng)效果,涉及javascript定時(shí)器觸發(fā)動(dòng)態(tài)改變頁(yè)面元素的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)間歇滾動(dòng)的運(yùn)動(dòng)效果。分享給大家供大家參考，具體如下：

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="content-type" charset="utf-8" />
 <meta http-equiv="content-type" content="text/html" />
 <title>demo</title>
</head>
<style type="text/css">
*{margin:0;padding:0;}
ul,li,img{margin:0;padding:0;border:0;list-style-type:none;}
#luanbo{border:1px solid red;overflow:hidden;height:24px;}
#info li{height:24px;line-height:24px;}
</style>
<body>
 <div id="luanbo">
  <ul id="info">
  <li>aaaaaaaaaaa</li>
  <li>bbbbbbbbbbb</li>
  <li>ccccccccccc</li>
  <li>ddddddddddd</li>
  <li>eeeeeeeeeee</li>
  <li>fffffffffff</li>
  </ul>
 </div>
<script type="text/javascript">
var odiv=document.getElementById("luanbo");
var oul=document.getElementById("info");
var oli=document.getElementById("info").getElementsByTagName("li");
var iNow=0;
function move(obj,tg){ //運(yùn)動(dòng)框架
clearInterval(dt);
var dt=setInterval(function(){
 var speed=2;
 if(tg-obj.scrollTop<speed){
  tg=obj.scrollTop;
  clearInterval(dt);
 }else{
  obj.scrollTop+=speed;
 }
},30);
}
oul.innerHTML+=oul.innerHTML;
function star(){
clearInterval(tm);
var tm=setInterval(function(){
 iNow++;
 if(odiv.scrollTop>=(oli[0].offsetHeight*oli.length)/2){
  odiv.scrollTop=0;
  iNow=0;
 }else{
 var get=oli[0].offsetHeight*iNow;
 move(odiv,get); //運(yùn)動(dòng)框架
 }
},2000);
}
star();
</script>
</body>
</html>

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

javascript實(shí)現(xiàn)圖片輪播簡(jiǎn)單效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)圖片輪播簡(jiǎn)單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
通過網(wǎng)頁(yè)查看JS源碼中漢字顯示亂碼的解決方法
這篇文章給大家主要介紹了通過網(wǎng)頁(yè)查看JS源碼的時(shí)候，發(fā)現(xiàn)漢字顯示是亂碼的解決方法，文中通過圖文詳解的介紹了解決的步驟，詳細(xì)會(huì)對(duì)大家很有幫助，有需要的朋友們下面來(lái)一起看看吧。
2016-10-10
es6函數(shù)之尾遞歸用法實(shí)例分析
這篇文章主要介紹了es6函數(shù)之尾遞歸用法,結(jié)合實(shí)例形式分析了es6函數(shù)尾遞歸原理、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
Bootstrap下拉菜單Dropdowns的實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap下拉菜單Dropdowns的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
微信小程序進(jìn)行微信支付的步驟昂述
最近開發(fā)微信小程序進(jìn)入到支付階段，一直以來(lái)從事App開發(fā)，所以支付流程還是熟記于心的。下面通過本文給大家講述下微信小程序進(jìn)行微信支付的步驟,需要的朋友可以參考下
2016-12-12
Javascript中函數(shù)分類&this指向的實(shí)例詳解
其實(shí)想要徹底理解js中this的指向，不必硬背，這篇文章主要給大家介紹了關(guān)于Javascript中函數(shù)分類&this指向的相關(guān)資料,需要的朋友可以參考下
2021-05-05
javascript 二分法(數(shù)組array)
擴(kuò)展Array對(duì)象，為其添加二分法查找功能,提高查找效率。
2010-04-04
小程序api實(shí)現(xiàn)promise封裝過程解析
這篇文章主要介紹了小程序api實(shí)現(xiàn)promise封裝過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-11-11
JavaScript導(dǎo)航腳本判斷當(dāng)前導(dǎo)航
這篇文章主要介紹了JavaScript導(dǎo)航腳本判斷當(dāng)前導(dǎo)航的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07
淺談javascript alert和confirm的美化
window對(duì)象的alert和confirm標(biāo)準(zhǔn)方法在不同瀏覽器的顯示效果不太相同，有個(gè)相同點(diǎn)是都不是很美觀。本文對(duì)此解決方法進(jìn)行介紹：使用js和css分別仿照它們，提供另一套函數(shù)，使在不同瀏覽器的有著相同的體驗(yàn)效果。下面就跟小編一起來(lái)看下吧
2016-12-12