zoukankan      html  css  js  c++  java
  • js实现页面消息滚动效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>autoScroll</title>
    </head>
    <style>
    .parent {
     300px;
    height: 200px;
    margin: 0 auto;
    background: #242424;
    overflow-y: scroll;
    }
    /*设置的子盒子高度大于父盒子,产生溢出效果*/
    .child {
    height: auto;
    }
    .child li {
    height: 50px;
    margin: 2px 0;
    background: #009678;
    }
    </style>
    <body>
    <div id="parent" class="parent">
    <div id="child1" class="child">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>8</li>
    <li>8</li>
    <li>8</li>
    <li>8</li>
    <li>8</li>
    <li>8</li>
    </div>
    <!-- <div id="child2" class="child"></div> -->
    </div>
    <script type="text/javascript">
    (function () {
    var parent = document.getElementById('parent');
    var child1 = document.getElementById('child1');
    setInterval(function () {
    console.log(parent.scrollTop,child1.scrollHeight,parent.scrollHeight)
    if(parent.scrollTop >= child1.clientHeight-parent.clientHeight) {
    parent.scrollTop = 0;
    } else {
    parent.scrollTop++;
    }
    }, 20);
    })()
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    springboot整合mybatis 异常 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):
    报时助手
    Huffman树费用
    动画效果
    工具和其他操作
    使用筛选器获取元素
    DOM操作
    属性和样式操作
    jQuery基础
    选择器
  • 原文地址:https://www.cnblogs.com/gitnull/p/14006960.html
Copyright © 2011-2022 走看看