镇场诗：
清心感悟智慧语，不着世间名与利。学水处下纳百川，舍尽贡高我慢意。
学有小成返哺根，愿铸一良心博客。诚心于此写经验，愿见文者得启发。
——————————————————————————————————————————
注：这个是我跟随视频教程学习的成果。逻辑与思想是视频中的，内容是我的。。。~~~~(>_<)~~~~。以后争取逻辑与思想也是自己的，加油(^ω^)
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，强，值得努力学习。传智播客的视频教程是我的学习资源,推荐。
如果博文有可以改进的地方，请留下评论，我会认真思考的。
注：我是一位正在努力的普通人，此文仅供测试与参考使用，不可做其他用途。当参考博文内容时，代表您已接受使用条款。
时间： 2024-08-12 05:35:40