                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /信息滚动效果制作

为什么我这个不能像老师那样向上移动了，求指点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style>
*{
margin: 0;
padding:0;
}
#mooc{
border: 1px solid red;
background-color: ghostwhite;
width: 500px;
height: 150px;
overflow: hidden;
margin: 100px auto;
}
#Box{
width: 450px;
line-height: 1.5em;
text-align: center;
border: 1px solid blueviolet;
padding-top: 4px;
height: 222px;
margin: auto;
}
#Box li{
list-style: none;
}
</style>

</head>
<body>
<div id="mooc">
<div id="Box">
<ul id="con1">
<li>匆匆那年我们究竟说了几遍再见之后再拖延</li>
<li>可惜谁有没有爱过不是一场七情上面的雄辩</li>
<li>匆匆那年我们一时匆忙撂下难以承受的诺言</li>
<li>只有等别人兑现</li>
<li>不怪那吻痕还没积累成茧</li>
<li>拥抱着冬眠也没能羽化再成仙</li>
<li>不怪这一段情没空反复再排练</li>
<li>是岁月宽容恩赐反悔的时间</li>
<li>如果再见不能红着眼是否还能红着脸</li>
</ul>
<ul id="con2"></ul>
</div>
</div>
<script type="text/javascript">
var area = document.getElementById('Box');
area.scrollTop =30;
</script>
</body>
</html>

qq_被吵吵_04176478

2017-04-15

源自：信息滚动效果制作 2-2

关注问题我要回答

1200

操作

收起

1 回答

迎风向上乀回答被采纳 +3 积分
2017-04-15

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>无缝滚动</title>
   <style>
*ul{
list-style:none;
}
*{
           margin: 0;
padding:0;
}
       #mooc{
           border: 1px solid red;
background-color: ghostwhite;
width: 500px;
margin: 100px auto;
}
       #Box{
           width: 450px;
line-height: 1.5em;
text-align: center;
border: 1px solid blueviolet;
padding-top: 4px;
height: 144px;
margin: auto;
overflow:hidden    /*  这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
}
       #Box li{
           width: 400px;
float: left;
display: block;
overflow: hidden;   /*  这个一定要加，超出的内容部分要隐藏 */
text-indent: 15px;
height: 24px;
}
   </style>

</head>
<body>
<div id="mooc">
   <div id="Box">
       <ul id="con1">
           <li>匆匆那年我们 究竟说了几遍 再见之后再拖延</li>
           <li>可惜谁有没有 爱过不是一场 七情上面的雄辩</li>
           <li>匆匆那年我们 一时匆忙撂下 难以承受的诺言</li>
           <li>只有等别人兑现</li>
           <li>不怪那吻痕还 没积累成茧</li>
           <li>拥抱着冬眠也没能 羽化再成仙</li>
           <li>不怪这一段情 没空反复再排练</li>
           <li>是岁月宽容恩赐 反悔的时间</li>
           <li>如果再见不能红着眼 是否还能红着脸</li>
       </ul>
       <ul id="con2"></ul>
   </div>
</div>
<script type="text/javascript">
var area = document.getElementById('Box');
area.scrollTop=20;
</script>
</body>
</html>

以上是我修改后的代码

第一个是没有在正确的地方用到overflow:hidden,代码里我也注释了

第二个是你没有定义这个li的CSS样式

第三个是你的BOX高度要比li的总高度小

呃,具体方面我的理解我不太会表述,就希望你看我修改后的代码然后再看看老师的视频,结合下自己思考思考吧。