<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>練習無縫滾動</title><style type="text/css" media="screen">? ?* {? ? margin: 0px;? ? padding: 0px; ? ? ? ? ? ?/* ?去掉所有標簽的marign和padding的值 ?*/}? ul li{list-style: none;margin:10px;}?? ?a{text-decoration: none;}? ?#moocBox {? ? height: 144px;? ? width: 400px;? ? margin-left: 25px;? ? margin-top: 10px;? ? overflow: hidden; ? ?/* ?這個一定要加，超出的內容部分要隱藏，免得撐高中間部分 */}? ??</style><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"></head><body><h3 id="moocTitle">最新課程<a href="#" target="_self">更多>></a> </h3>? ? <div id="moocBox">? ? ? ? <ul id="con1">? ? ? ? ? ? <li><a href="#" >好好學習</a></li>? ? ? ? ? ? <li><a href="#" >天天向上</a></li>? ? ? ? ? ? <li><a href="#" >加油加油</a></li>? ? ? ? ? ? <li><a href="#" >體會學習的樂趣</a></li>? ? ? ? ? ? <li><a href="#" >談談你的想法</a></li>? ? ? ? ? ? <li><a href="#" >你一定能成功</a></li>? ? ? ? ? ? <li><a href="#" >堅持自己的夢想</a></li>? ? ? ? ? ? <li><a href="#" >堅持到最后</a></li>? ? ??? ? ? ? </ul>? ? ? ? <ul di="con2">? ? ? ? </ul>? ? </div><script type="text/javascript">? ? var area = document.getElementById('moocBox'); ? ?var con1 = document.getElementById('con1'); ? ?var con2 = document.getElementById('con2'); ? ?var speed = 50; ? ?area.scrollTop = 0; ? ?con2.innerHTML = con1.innerHTML; ? ?function scrollUp(){ ? ?if(area.scrollTop >= con1.scrollHeight) { ? ?area.scrollTop = 0; ? ?}else{ ? ?area.scrollTop ++; ? ?} ? ?} ? ?var myScroll = setInterval("scrollUp()",speed); ? ??area.onmouseover=function(){? ? clearInterval(myScroll);}area.onmouseout=function(){? ? myScroll = setInterval("scrollUp()",speed);?}</script></body></html>
為什么不能滾動
慕粉3760367
2016-10-20 13:08:08