信息滚动列表

样式一：文字逐行向上间隔滚动

文字逐行向上间隔滚动.png

css样式

.apple{ 
           height:50px;
           overflow:hidden;
           width:90%; 
           margin:30px auto;
           border:1px solid #1B96EE;
}
.apple a{
            width:100%;
            height:50px;
            line-height:50px; 
            text-indent:20px;
            color:#1B96EE;
            display:block;
            text-decoration:none;
}

要想实现滚动，样式上需要注意以下几点

1.最外面的div要有具体的高度。
2.最外面的div必须加上overflow:hidden
3.因为是获取li标签的高度作为向上滚动的距离，所以li标签的样式里最好不要有padding或者margin，如果效果冲突的话可以在li标签里加个a标签，样式写在a标签里

html结构

    

           
你是我的小丫小苹果 
  
               
怎么爱你都不嫌多
 
               
红红的小脸儿温暖我的心窝 
  
               
点亮我生命的火 火火火火
    
 

JS

样式二：文字逐行向下间隔滚动

文字逐行向下间隔滚动.png

Css样式

阴影知识点

box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。
inset 可选。将外部阴影 (outset) 改为内部阴影。

html结构

    

        
我的图片站：xw素材网(www.xwcms.net) 已经正式上线上线啦···嘿嘿
        
有位非常漂亮的女同事，有天起晚了没有时间化妆便急忙冲到公司。结果那天她被记旷工了。。
                .................
    

JS部分

样式三：文字向上滑动

文字列表一直向上滑动，当列表中条数小于5条则不滑动

文字向上滑动.png

CSS样式

 #box {
        border: 1px solid #dadada;
        padding: 0px;
        width: 500px;
        margin: 30px auto;
        height: 208px;
        overflow: hidden; /*  这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
    }
   .list-group{
        margin: 0px;
        width: 100%;
    }
   #cont1,#cont2{
        margin: 0px;
       padding: 0px;
   }

Html结构

 

        

            
555在2017-4-22捐助了100元
            
666在2017-4-22捐助了100元
            .................................
        
        

    

JS

  var area = document.getElementById('box');
     var cont1 = document.getElementById('cont1');
     var cont2 = document.getElementById('cont2');
    var len=cont1.getElementsByTagName("li").length;
     area.scrollTop = 0;
     //如果li小于等于5条就不滚动
    if(len<=5){
         cont2 ="";
     }
     // 克隆cont1给cont2
     cont2.innerHTML = cont1.innerHTML;
     function myScroll() {
         if(area.scrollTop >= cont1.scrollHeight) {
             area.scrollTop = 0;
         }else {
             area.scrollTop++;
         }
     }
     var time = 50;
     var interval = setInterval('myScroll()', time);
     area.onmouseover = function () {
         clearInterval(interval);
     };
     area.onmouseout = function () {
         // 继续执行之前的定时器
         interval = setInterval('myScroll()', time);
     };

原理

1.先获取滚动部分的父容器area和滚动部分容器，若设置：area.scrollTop =10;内容就会往上走10px。
2.我们的目的就是让它自动往上滚动，就需要这样：area.scrollTop ++;用定时器setInterval()调用，就要包装成函数

3. 表示每50毫秒执行一次scrollTop加一函数，这时就可以滚动了。但滚动到con1末尾就停了，这时因为后面没东西了，自然就不会继续滚动了。
4. 再看html有一个空的con2，就是用来处理这个问题，要把con1复制一份给con2 ，让con1滚动完，继续滚动con2
5. 很明显con2也会滚动完，那有这么办，难道再复制一个con3、con4吗，肯定不可行。con2滚动时，con1已经滚动出外面了，已经看不见了，此时就可以对它进行操作了。
6. 更改了scrollUp()函数，加一个判断，当容器往上滚动（相当于有滚动条、滚动条向下拉）到con1高度时，con1刚好向上消失掉，又出现覆盖了con2。再继续向上，滚动出去又马上覆盖con2，无限这样循环。

scrollTop有关知识点：

scrollTop：返回或设置匹配元素的滚动条的垂直位置。
div1.scrollTop=50;
文字部分会往上走50像素，相当于用滚动条向下拉了50像素。
当内层容器内容不超出外层容器高度时，不会产生滚动条，因此scrollTop自然也无效了。
若外层容器设置了overflow:hidden时，不显示滚动条，但内容部分超出外层容器的话，scrollTop依然有效