• 用scrollTop制作一个自动滚动公告栏


    我们在浏览网页时,经常会看到会一些滚动的栏目,比如向上滚动的公告、新闻等。其实他们的制作都不难,只要学了基础的html、css、javascript就可以做出来,用JavaScript的scrollTop就行。

    scrollTop:返回或设置匹配元素的滚动条的垂直位置。

    1 <div id="div1" style="200px;height:200px;background-color:#999999;overflow:auto;background-color: #999999;"> 
    2 <div style="100px;height:300px;background-color:#FFFF00;" > 
    3 这些文字显示在内层元素中。 
    4 </div> 
    5 </div> 

    这里,内层容器高度大于外层容器,就会产生垂直滚动条,当用javascript设置外层容器:

    var div1=document.getElementById("div1"); 

    div1.scrollTop=50;

    文字部分会往上走50像素,相当于用滚动条向下拉了50像素。

    (注意:当内层容器内容不超出外层容器高度时,不会产生滚动条,因此scrollTop自然也无效了。若外层容器设置了overflow:hidden时,不显示滚动条,但内容部分超出外层容器的话,scrollTop依然有效)

      这就是一个已经做好的demo截图,下面是详细步骤

    1、写html结构和css样式

     1 <div  id="main">
     2     <h3 id="title">Title</h3>
     3     <div  id="box">
     4         <ul id="con1">
     5             <li><a href="#">1.学会html5 绝对的屌丝逆袭</a><span>2016-06-01</span></li>
     6             <li><a href="#">2.tab页面切换效果(案例)</a><span>2016-06-01</span></li>
     7             <li><a href="#">3.圆角水晶按钮制作(案例)</a><span>2016-06-01</span></li>
     8             <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2016-06-01</span></li>
     9             <li><a href="#">5.分页页码制作(案例)</a><span>2016-06-01</span></li>
    10             <li><a href="#">6.导航条菜单的制作(案例)</a><span>2016-06-01</span></li>
    11             <li><a href="#">7.信息列表制作(案例)</a><span>2016-06-01</span></li>
    12             <li><a href="#">8.下拉菜单制作(案例)</a><span>2016-06-01</span></li>
    13             <li><a href="#">9.如何实现“新手引导”效果</a><span>2016-06-01</span></li>
    14         </ul>
    15         <ul id="con2">    /*  滚动需要  */
    16      </ul>
    17  </div>
    18</div>
     1         * {
     2             margin: 0px;
     3             padding: 0px;            /*  去掉所有标签的marign和padding的值  */
     4         }
     5         ul {
     6             list-style: none;           /*  去掉ul标签默认的点样式  */
     7         }
     8         a {
     9             color: #333;
    10             font-size: 12px;
    11             text-decoration: none;     /* 超链接样式 */
    12         }
    13         a:hover {
    14             color: #ff0000;
    15         }
    16         #main {
    17             width: 399px;
    18             border: 5px solid #ababab;
    19             -moz-border-radius: 15px;      /* Gecko browsers */
    20             -webkit-border-radius: 15px;   /* Webkit browsers */
    21             border-radius: 15px;
    22             box-shadow: 2px 2px 10px #ababab;
    23             margin: 50px auto 0;
    24             text-align: left;               /* 让新闻内容靠左 */
    25         }
    26         /*  头部样式 */
    27         #title {
    28             height: 62px;
    29             overflow: hidden;  /* 内容超出的部分要隐藏,免得撑高头部 */
    30             font-size: 26px;
    31             line-height: 62px;
    32             padding-left: 30px;
    33             background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */
    34             background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */
    35             filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/
    36             border: 1px solid #f05e6f;
    37             -moz-border-radius: 8px 8px 0 0;      /* Gecko browsers */
    38             -webkit-border-radius: 8px 8px 0 0;   /* Webkit browsers */
    39             border-radius: 8px 8px 0 0;
    40             color: #fff;
    41             position: relative;
    42         }
    43         #title a {
    44             position: absolute;
    45             right: 10px;
    46             bottom: 10px;
    47             display: inline;
    48             color: #fff;
    49             font-size: 12px;
    50             line-height: 24px;
    51         }
    52         #box {
    53             height: 144px;
    54             width: 335px;
    55             margin-left: 25px;
    56             margin-top: 10px;
    57             overflow: hidden;    /* 超出的内容部分要隐藏,免得撑高中间部分 */
    58         }
    59         #main ul li {
    60             height: 24px;
    61         }
    62         #main ul li a {
    63             float: left;
    64             text-indent: 15px;
    65         }
    66         #main ul li span {
    67             float: right;
    68             color: #999;
    69         }

    在con1设置了ul和li的高度样式,足以撑大容器,使得con1高度大于了外层容器#box高度,scrollTop就起作用了。

    2、下面写javascript部分

    1     var area = document.getElementById('box');
    2     var con1 = document.getElementById('con1');
    3     var con2 = document.getElementById('con2');

    先获取滚动部分的父容器area和滚动部分容器,若设置:area.scrollTop =10;内容就会往上走10px。

    我们的目的就是让它自动往上滚动,就需要这样:area.scrollTop ++;用定时器setInterval()调用,就要包装成函数

     function scrollUp(){
                area.scrollTop ++;
     }
     var myScroll = setInterval("scrollUp()",50);

     这表示每50毫秒执行一次scrollTop加一函数,这时就可以滚动了。但滚动到con1末尾就停了,这时因为后面没东西了,自然就不会继续滚动了。再看html有一个空的con2,就是用来处理这个问题,要把con1复制一份给con2 ,让con1滚动完,继续滚动con2

        con2.innerHTML = con1.innerHTML;

     很明显con2也会滚动完,那有这么办,难道再复制一个con3、con4吗,肯定不可行。con2滚动时,con1已经滚动出外面了,已经看不见了,此时就可以对它进行操作了。

    1     function scrollUp(){
    2         if(area.scrollTop >= con1.scrollHeight) {
    3             area.scrollTop = 0;
    4         }else{
    5             area.scrollTop ++;
    6         }
    7     }

    更改了scrollUp()函数,加一个判断,当容器往上滚动(相当于有滚动条、滚动条向下拉)到con1高度时,con1刚好向上消失掉,又出现覆盖了con2。再继续向上,滚动出去又马上覆盖con2,无限这样循环。

    要改进一下,可以添加两个事件,滚动速度可以用var speed=50;设置

    1     area.onmouseover = function(){
    2         clearInterval(myScroll);
    3     }
    4     area.onmouseout = function(){
    5         myScroll = setInterval("scrollUp()",speed);
    6     }

    鼠标移动到容器时,就停止滚动,移出时又继续滚动。

    全部javascript代码如下

     1   var area = document.getElementById('box');
     2     var con1 = document.getElementById('con1');
     3     var con2 = document.getElementById('con2');
     4     var speed = 50;
     5     area.scrollTop = 0;
     6     con2.innerHTML = con1.innerHTML;
     7     function scrollUp(){
     8         if(area.scrollTop >= con1.scrollHeight) {
     9             area.scrollTop = 0;
    10         }else{
    11             area.scrollTop ++;
    12         }
    13     }
    14     var myScroll = setInterval("scrollUp()",speed);
    15     area.onmouseover = function(){
    16         clearInterval(myScroll);
    17     }
    18     area.onmouseout = function(){
    19         myScroll = setInterval("scrollUp()",speed);
    20     }

     以上就是滚动栏的做法,主要用于个人学习记录

  • 相关阅读:
    08.3 属性描述符__get__ __set__ __delete__
    08.2 __getattr__ 和 __getattribute__
    08.1 property 装饰器
    appium脚本编写,元素定位,隐式等待
    appium的安装和介绍
    docker镜像构建
    dockerfile的语法和指令
    docker的registry介绍
    docker-compose使用
    docker部署Jenkins
  • 原文地址:https://www.cnblogs.com/ooooevan/p/5551104.html
Copyright © 2020-2023  润新知