首页 > 代码库 > 练习题：间歇性向上滚动

练习题：间歇性向上滚动

2024-10-25 03:50:38   208人阅读

   

  1 <!DOCTYPE html >
  2 <html >
  3 <head>
  4 <meta charset=utf-8" />
  5 <title>新闻间歇性向上滚动</title>
  6 <style>
  7 body {
  8     font-size: 12px;
  9     line-height: 24px;
 10     text-algin: center;        /* 页面内容居中 */
 11 }
 12 * {
 13     margin: 0px;
 14     padding: 0px;            /*  去掉所有标签的marign和padding的值  */
 15 }
 16 ul {
 17     list-style: none;           /*  去掉ul标签默认的点样式  */
 18 }
 19 a img {
 20     border: none;        /*  超链接下，图片的边框  */
 21 }
 22 a {
 23     color: #333;
 24     text-decoration: none;     /* 超链接样式 */
 25 }
 26 a:hover {
 27     color: #ff0000;
 28 }
 29 #mooc {
 30     width: 399px;
 31     border: 5px solid #ababab;
 32     -moz-border-radius: 15px;      /* Gecko browsers */
 33     -webkit-border-radius: 15px;   /* Webkit browsers */
 34     border-radius: 15px;
 35     box-shadow: 2px 2px 10px #ababab;
 36     margin: 50px auto 0;
 37     text-align: left;               /* 让新闻内容靠左 */
 38 }
 39 /*  头部样式 */    
 40 #moocTitle {
 41     height: 62px;
 42     overflow: hidden;  /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */
 43     font-size: 26px;
 44     line-height: 62px;
 45     padding-left: 30px;
 46     background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */
 47     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */
 48 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#8fa1ff‘, endColorstr=‘#f05e6f‘, GradientType=‘0‘); /* IE*/
 49     border: 1px solid ##f05e6f;
 50     -moz-border-radius: 8px 8px 0 0;      /* Gecko browsers */
 51     -webkit-border-radius: 8px 8px 0 0;   /* Webkit browsers */
 52     border-radius: 8px 8px 0 0;
 53     color: #fff;
 54     position: relative;
 55 }
 56 #moocTitle a {
 57     position: absolute;
 58     right: 10px;
 59     bottom: 10px;
 60     display: inline;
 61     color: #fff;
 62     font-size: 12px;
 63     line-height: 24px;
 64 }
 65 /*  底部样式 */
 66 #moocBot {
 67     width: 399px;
 68     height: 10px;
 69     overflow: hidden;     /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */
 70 }
 71 /*  中间样式 */
 72 #moocBox {
 73     height: 144px;
 74     width: 335px;
 75     margin-left: 25px;
 76     margin-top: 10px;
 77     overflow: hidden;    /*  这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
 78 }
 79 #mooc ul li {
 80     height: 24px;
 81 }
 82 #mooc ul li a {
 83     width: 180px;
 84     float: left;
 85     display: block;
 86     overflow: hidden;
 87     text-indent: 15px;
 88     height: 24px;
 89 }
 90 #mooc ul li span {
 91     float: right;
 92     color: #999;
 93 }
 94 </style>
 95 </head>
 96 
 97 <body>
 98 <!--  前端课程公告开始 -->
 99 <div  id="mooc"> 
100 <!--  头部 -->
101 <div  id="moocTitle">前端最新课程<a href="#" target="_self">更多>></a> </div>
102 <!--  头部结束 --> 
103 <!--  中间 -->
104 <div  id="moocBox">
105     <ul>
106         <li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li>
107         <li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
108         <li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
109         <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
110         <li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
111         <li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
112         <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
113         <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
114         <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
115     </ul>
116 </div>
117 <!--  中间结束 --> 
118 <!--  底部 -->
119 <div  id ="moocBot"> </div>  
120 <!--  底部结束 --> 
121 </div>
122 <!-- 前端课程公告结束 --> 
123 
124 <script type="text/javascript">
125  var area = document.getElementById(‘moocBox‘);
126  var iliHeight = 24;//单行滚动的高度
127  var speed = 50;//滚动的速度
128  var time;
129  var delay= 2000;
130  area.scrollTop=0;
131  area.innerHTML+=area.innerHTML;//克隆一份一样的内容
132  function startScroll(){
133      time=setInterval("scrollUp()",speed);
134      area.scrollTop++;
135      }
136  function scrollUp(){
137      if(area.scrollTop % iliHeight==0){
138          clearInterval(time);
139          setTimeout(startScroll,delay);
140          }else{
141              area.scrollTop++;
142              if(area.scrollTop >= area.scrollHeight/2){
143                  area.scrollTop =0;
144                  }
145              }
146      }
147      setTimeout(startScroll,delay)
148  </script>
149 </body>
150 </html>

做题思路及注意点：：

 1：样式布局方面：

  （1）注意#moocBox的包裹层设置高度为滚动信息高度的倍数（例如滚动信息li的高度24px;#moocBox的包裹层要显示6条信息设置高度为24*6=144px；）；

  （2）#moocBox的包裹层样式overflow: hidden;  这个一定要加，超出的内容部分要隐藏，免得撑高中间部分；

 

2：js交互方面：

  （1）用setTimeout 实现间歇，用setInterval（）方法实现向上滚动；

   （2）js详细做题步骤：

                 获取信息包裹层，定义信息包裹层的area.scrollTop=0,定义liHeight=24；定义var time；

                  area.innerHTML+=area.innerHTML;//克隆一份一样的内容；

                信息向上滚动：function startScroll(){time=setInterval（"scrollUp()",50）;area.scrollTop++;}//

                 间歇性             ： function scrollUp（）{

    if(scrollTop % liHeight==0){    //当向上卷去的高度能够被liHeight除尽没有余数；
        clearInterval(time)     
停止向上滚动；
        setTimeout(startScroll,2000);    延迟两秒后执行
        }else{     
            area.scrollTop++;  当以上条件不符合时，继续向上滚动
            if(scrollTop>=area.scrollHeight/2){ 即向上卷去的内容大于等于area.scrollHeight时， area.scrollTop =0;  重新开始计算。实现重复滚动  ，除以2是因为克隆多了一份内容
                 area.scrollTop =0;    
            }
        }
} setTimeout(startScroll,2000)  调用执行；

 

练习题：间歇性向上滚动


联系
我们