首頁 > 開發者 > JavaScript
標籤：interval 公式 ntb ros 複製 參數 flow 技術分享 style
鎮場詩：
清心感悟智慧語，不著世間名與利。學水處下納百川，舍盡貢高我慢意。
學有小成返哺根，願鑄一良心部落格。誠心於此寫經驗，願見文者得啟發。
——————————————————————————————————————————
註：這個是我跟隨視頻教程學習的成果。邏輯與思想是視頻中的，內容是我的。。。~~~~(>_<)~~~~。以後爭取邏輯與思想也是自己的，加油(^ω^)
code:
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title><meta charset="utf-8" /> <style type="text/css"> body,ul,li,div{ margin:0px; padding:0px; } ul,li{ list-style:none; } /* 在css中 用className好 在js中 用id */ #dome0{ width:150px; height:180px; border:1px solid red; margin:20px auto; padding:5px 10px; overflow:hidden;/*捲軸不要出現*/ } #dome1{ background-color:aquamarine; } #dome2{ background-color:rosybrown; } </style> <script type="text/javascript"> window.onload = function () { var dome0 = document.getElementById("dome0"); var dome1 = document.getElementById("dome1"); var dome2 = document.getElementById("dome2"); dome1.style.height = dome0.offsetHeight + "px"; dome2.style.height = dome0.offsetHeight + "px"; //將dome1中的內容複寫到dome2中 dome2.innerHTML = dome1.innerHTML; //實現滾動效果，需要定時器 //在工程中，許多參數的設定並沒有一個確定的公式 //經驗確定的 //參數的名字也需要 易於辨識的。 window.setInterval("StartRoll(dome0)", 40); } function StartRoll(myObj) { if(myObj.scrollTop==myObj.offsetHeight) { myObj.scrollTop=0; } else { myObj.scrollTop++; } } </script></head><body> <div id="dome0"> <div id="dome1"> <ul> <li>論語</li> <li>道德經</li> <li>金剛經</li> <li>易經</li> <li>北鬥經</li> <li>文韜武略</li> <li>地藏菩薩本願經</li> <li>本草綱目</li> </ul> </div> <div id="dome2"></div> </div></body></html>
result:
tip:
不同的背景顏色是為了方便查看效果。
感想:
真是很巧妙，這種思想與邏輯 實現效果的代碼不多，但是效果做的卻很好。讚歎。
——————————————————————————————————————————
博文的精髓，在技術部分，更在鎮場一詩。IDE: VS2015;瀏覽器: Firefox。
html+css+js，強，值得努力學習。傳智播客的視頻教程是我的學習資源,推薦。
如果博文有可以改進的地方，請留下評論，我會認真思考的。
註：我是一位正在努力的普通人，此文僅供測試與參考使用，不可做其他用途。當參考博文內容時，代表您已接受使用規定。
JavaScript基礎 捲軸幅的效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
