無縫滾動（向上滾動）

這是一個慕課網(wǎng)的實例：感謝vivain老師
現(xiàn)在看一下吧
第一次需曾，我實現(xiàn)了滾動
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#mooc{
width: 399px;
border: 5px solid #ababab;
-moz-border-radius: 15px; /* Gecko browsers /
-webkit-border-radius: 15px; / Webkit browsers /
border-radius: 15px;
box-shadow: 2px 2px 10px #ababab;
/邊框陰影/
margin: 50px auto 0;
text-align: left;
}
#moocBox {
height: 144px;
width: 335px;
margin-left: 25px;
margin-top: 10px;
overflow: hidden; / 這個一定要加善绎，超出的內(nèi)容部分要隱藏悦析，免得撐高中間部分 /
}
#mooc ul li {
height: 24px;
}
#mooc ul li a {
width: 180px;
float: left;
display: block;
overflow: hidden;
text-indent: 15px;
height: 24px;
}
#mooc ul li span {
float: right;
color: #999;
}
</style>
</head>
<body>
<div id="mooc">
<div id="moocBox">
<ul id="con1">
<li><a href="#">1.學(xué)會html5 絕對的屌絲逆襲（案例）</a><span>2013-09-18</span></li>
<li><a href="#">2.tab頁面切換效果（案例）</a><span>2013-10-09</span></li>
<li><a href="#">3.圓角水晶按鈕制作（案例）</a><span>2013-10-21</span></li>
<li><a href="#">4.HTML+CSS基礎(chǔ)課程(系列)</a><span>2013-11-01</span></li>
<li><a href="#">5.分頁頁碼制作（案例）</a><span>2013-11-06</span></li>
<li><a href="#">6.導(dǎo)航條菜單的制作（案例）</a><span>2013-11-08</span></li>
<li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
<li><a href="#">8.下拉菜單制作(案例)</a><span>2013-11-22</span></li>
<li><a href="#">9.如何實現(xiàn)“新手引導(dǎo)”效果</a><span>2013-12-06</span></li>
</ul>
<ul id="con2">
</ul>

</div>
</div>
</body>
<script type="text/javascript">
var area = document.getElementById('moocBox');
area.scrollTop=0;//初識狀態(tài)
var timer=50;//滾動時間
setInterval('area.scrollTop++',timer);
</script>
</html>
第二次（滾動到尾部時眶拉，停止了滾動筐咧，這里用到克隆）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#mooc{
width: 399px;
border: 5px solid #ababab;
-moz-border-radius: 15px; / Gecko browsers /
-webkit-border-radius: 15px; / Webkit browsers /
border-radius: 15px;
box-shadow: 2px 2px 10px #ababab;
/邊框陰影/
margin: 50px auto 0;
text-align: left;
}
#moocBox {
height: 144px;
width: 335px;
margin-left: 25px;
margin-top: 10px;
overflow: hidden; / 這個一定要加脆贵，超出的內(nèi)容部分要隱藏风响，免得撐高中間部分 /
}
#mooc ul li {
height: 24px;
}
#mooc ul li a {
width: 180px;
float: left;
display: block;
overflow: hidden;
text-indent: 15px;
height: 24px;
}
#mooc ul li span {
float: right;
color: #999;
}
</style>
</head>
<body>
<div id="mooc">
<div id="moocBox">
<ul id="con1">
<li><a href="#">1.學(xué)會html5 絕對的屌絲逆襲（案例）</a><span>2013-09-18</span></li>
<li><a href="#">2.tab頁面切換效果（案例）</a><span>2013-10-09</span></li>
<li><a href="#">3.圓角水晶按鈕制作（案例）</a><span>2013-10-21</span></li>
<li><a href="#">4.HTML+CSS基礎(chǔ)課程(系列)</a><span>2013-11-01</span></li>
<li><a href="#">5.分頁頁碼制作（案例）</a><span>2013-11-06</span></li>
<li><a href="#">6.導(dǎo)航條菜單的制作（案例）</a><span>2013-11-08</span></li>
<li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
<li><a href="#">8.下拉菜單制作(案例)</a><span>2013-11-22</span></li>
<li><a href="#">9.如何實現(xiàn)“新手引導(dǎo)”效果</a><span>2013-12-06</span></li>
</ul>
<ul id="con2">
</ul>

</div>
</div>
</body>
<script type="text/javascript">
var area = document.getElementById('moocBox');
var con1=document.getElementById('con1');
var con2=document.getElementById('con2');
con2.innerHTML=con1.innerHTML;//讓div1和div2完全相同
area.scrollTop=0;//初識狀態(tài)
var timer=50;//滾動時間
setInterval('area.scrollTop++',timer);
</script>
</html>
第三次（第二次克隆成功了，但是仍然會停住的）
<script type="text/javascript">
var area = document.getElementById('moocBox');
var con1=document.getElementById('con1');
var con2=document.getElementById('con2');
con2.innerHTML=con1.innerHTML;//讓div1和div2完全相同
//判斷一下是否走完
//滾動的高度是否大于自身的高度
if(area.scrollTop>=con1.offsetHeight){
area.scrollTop=0;
}
// 如何沒執(zhí)行完怎么辦
else{
area.scrollTop++;
}
area.scrollTop=0;//初識狀態(tài)
var timer=50;//滾動時間
setInterval('area.scrollTop++',timer);
</script>
第四次：實現(xiàn)了滾動
<script type="text/javascript">
var area = document.getElementById('moocBox');
var con1=document.getElementById('con1');
var con2=document.getElementById('con2');
con2.innerHTML=con1.innerHTML;//讓div1和div2完全相同
var timer=50;//滾動時間
function scrollUp(){
//判斷一下是否走完
//滾動的高度是否大于自身的高度
if(area.scrollTop>=con1.offsetHeight){
area.scrollTop=0;
}
// 如何沒執(zhí)行完怎么辦
else{
area.scrollTop++;
}
}
var myScroll= setInterval('scrollUp()',timer);
</script>
實現(xiàn)效果：

最終實現(xiàn)的效果

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#mooc{
width: 399px;
border: 5px solid #ababab;
-moz-border-radius: 15px; / Gecko browsers /
-webkit-border-radius: 15px; / Webkit browsers /
border-radius: 15px;
box-shadow: 2px 2px 10px #ababab;
/邊框陰影/
margin: 50px auto 0;
text-align: left;
}
#moocBox {
height: 144px;
width: 335px;
margin-left: 25px;
margin-top: 10px;
overflow: hidden; / 這個一定要加丹禀，超出的內(nèi)容部分要隱藏，免得撐高中間部分 /
}
#mooc ul li {
height: 24px;
}
#mooc ul li a {
width: 180px;
float: left;
display: block;
overflow: hidden;
text-indent: 15px;
height: 24px;
}
#mooc ul li span {
float: right;
color: #999;
}
* {
margin: 0px;
padding: 0px; / 去掉所有標簽的marign和padding的值 /
}
</style>
</head>
<body>
<div id="mooc">
<div id="moocBox">
<ul id="con1">
<li><a href="#">1.學(xué)會html5 絕對的屌絲逆襲（案例）</a><span>2013-09-18</span></li>
<li><a href="#">2.tab頁面切換效果（案例）</a><span>2013-10-09</span></li>
<li><a href="#">3.圓角水晶按鈕制作（案例）</a><span>2013-10-21</span></li>
<li><a href="#">4.HTML+CSS基礎(chǔ)課程(系列)</a><span>2013-11-01</span></li>
<li><a href="#">5.分頁頁碼制作（案例）</a><span>2013-11-06</span></li>
<li><a href="#">6.導(dǎo)航條菜單的制作（案例）</a><span>2013-11-08</span></li>
<li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
<li><a href="#">8.下拉菜單制作(案例)</a><span>2013-11-22</span></li>
<li><a href="#">9.如何實現(xiàn)“新手引導(dǎo)”效果</a><span>2013-12-06</span></li>
</ul>
<ul id="con2">
</ul>

</div>
</div>
</body>
<script type="text/javascript">
var area = document.getElementById('moocBox');
var con1=document.getElementById('con1');
var con2=document.getElementById('con2');
con2.innerHTML=con1.innerHTML;//讓div1和div2完全相同
var timer=50;//滾動時間
function scrollUp(){
//判斷一下是否走完
//滾動的高度是否大于自身的高度
if(area.scrollTop>=con1.offsetHeight){
area.scrollTop=0;
}
// 如何沒執(zhí)行完怎么辦
else{
area.scrollTop++;
}
}
var myScroll= setInterval('scrollUp()',timer);
</script>
</html>
最后鞋怀，我們加一個鼠標懸停的效果：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#mooc{
width: 399px;
border: 5px solid #ababab;
-moz-border-radius: 15px; / Gecko browsers /
-webkit-border-radius: 15px; / Webkit browsers /
border-radius: 15px;
box-shadow: 2px 2px 10px #ababab;
/邊框陰影/
margin: 50px auto 0;
text-align: left;
}
#moocBox {
height: 144px;
width: 335px;
margin-left: 25px;
margin-top: 10px;
overflow: hidden; / 這個一定要加双泪，超出的內(nèi)容部分要隱藏，免得撐高中間部分 /
}
#mooc ul li {
height: 24px;
}
#mooc ul li a {
width: 180px;
float: left;
display: block;
overflow: hidden;
text-indent: 15px;
height: 24px;
}
#mooc ul li span {
float: right;
color: #999;
}
* {
margin: 0px;
padding: 0px; / 去掉所有標簽的marign和padding的值 */
}
</style>
</head>
<body>
<div id="mooc">
<div id="moocBox">
<ul id="con1">
<li><a href="#">1.學(xué)會html5 絕對的屌絲逆襲（案例）</a><span>2013-09-18</span></li>
<li><a href="#">2.tab頁面切換效果（案例）</a><span>2013-10-09</span></li>
<li><a href="#">3.圓角水晶按鈕制作（案例）</a><span>2013-10-21</span></li>
<li><a href="#">4.HTML+CSS基礎(chǔ)課程(系列)</a><span>2013-11-01</span></li>
<li><a href="#">5.分頁頁碼制作（案例）</a><span>2013-11-06</span></li>
<li><a href="#">6.導(dǎo)航條菜單的制作（案例）</a><span>2013-11-08</span></li>
<li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
<li><a href="#">8.下拉菜單制作(案例)</a><span>2013-11-22</span></li>
<li><a href="#">9.如何實現(xiàn)“新手引導(dǎo)”效果</a><span>2013-12-06</span></li>
</ul>
<ul id="con2">
</ul>

</div>
</div>
</body>
<script type="text/javascript">
var area = document.getElementById('moocBox');
var con1=document.getElementById('con1');
var con2=document.getElementById('con2');
con2.innerHTML=con1.innerHTML;//讓div1和div2完全相同
var timer=50;//滾動時間
function scrollUp(){
//判斷一下是否走完
//滾動的高度是否大于自身的高度
if(area.scrollTop>=con1.offsetHeight){
area.scrollTop=0;
}
// 如何沒執(zhí)行完怎么辦
else{
area.scrollTop++;
}
}
var myScroll= setInterval('scrollUp()',timer);
//鼠標移入
area.onmouseover = function(){
clearInterval(myScroll);
}
area.onmouseout = function(){
myScroll = setInterval("scrollUp()",timer);
}
</script>
</html>

最后編輯于：2017.12.11 13:44:10

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末密似，一起剝皮案震驚了整個濱河市焙矛，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌残腌，老刑警劉巖村斟，帶你破解...
沈念sama閱讀 210,914評論 6贊 490
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件贫导，死亡現(xiàn)場離奇詭異，居然都是意外死亡蟆盹，警方通過查閱死者的電腦和手機孩灯，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 89,935評論 2贊 383
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來逾滥，“玉大人峰档，你說我怎么就攤上這事≌迹” “怎么了讥巡？”我有些...
開封第一講書人閱讀 156,531評論 0贊 345
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長舔哪。經(jīng)常有香客問我欢顷，道長，這世上最難降的妖魔是什么捉蚤？我笑而不...
開封第一講書人閱讀 56,309評論 1贊 282
?港島之戀（遺憾婚禮）
正文為了忘掉前任抬驴，我火速辦了婚禮，結(jié)果婚禮上外里，老公的妹妹穿的比我還像新娘怎爵。我一直安慰自己，他們只是感情好盅蝗，可當(dāng)我...
茶點故事閱讀 65,381評論 5贊 384
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布鳖链。她就那樣靜靜地躺著，像睡著了一般墩莫。火紅的嫁衣襯著肌膚如雪芙委。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,730評論 1贊 289
城市分裂傳說
那天狂秦，我揣著相機與錄音灌侣，去河邊找鬼。笑死裂问，一個胖子當(dāng)著我的面吹牛侧啼，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播堪簿，決...
沈念sama閱讀 38,882評論 3贊 404
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼痊乾，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了椭更？” 一聲冷哼從身側(cè)響起哪审，我...
開封第一講書人閱讀 37,643評論 0贊 266
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎虑瀑，沒想到半個月后湿滓，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體滴须，經(jīng)...
沈念sama閱讀 44,095評論 1贊 303
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,448評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年叽奥，在試婚紗的時候發(fā)現(xiàn)自己被綠了扔水。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 38,566評論 1贊 339
活死人
序言：一個原本活蹦亂跳的男人離奇死亡而线，死狀恐怖铭污，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情膀篮，我是刑警寧澤嘹狞，帶...
沈念sama閱讀 34,253評論 4贊 328
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站誓竿，受9級特大地震影響磅网，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜筷屡，卻給世界環(huán)境...
茶點故事閱讀 39,829評論 3贊 312
男人毒藥：我在死后第九天來索命
文/蒙蒙一涧偷、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧毙死，春花似錦燎潮、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,715評論 0贊 21
一樁弒父案确封，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至再菊，卻和暖如春爪喘，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背纠拔。一陣腳步聲響...
開封第一講書人閱讀 31,945評論 1贊 264
情欲美人皮
我被黑心中介騙來泰國打工秉剑，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人稠诲。一個月前我還...
沈念sama閱讀 46,248評論 2贊 360
代替公主和親
正文我出身青樓侦鹏，卻偏偏與公主長得像，于是被迫代替她去往敵國和親臀叙。傳聞我的和親對象是個殘疾皇子种柑，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 43,440評論 2贊 348

無縫滾動（向上滾動）

推薦閱讀更多精彩內(nèi)容