- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- Document
- </title>
- <style>
- *{ margin: 0; padding: 0; } .box{ margin-top: 30px; position: relative;
- height: 30px; overflow: hidden; } .box-bar{ width: 75%; height: 30px; line-height:
- 30px; background: pink; border-radius: 0 15px 15px 0; } ul{ width: 60%;
- list-style: none; position: absolute; top:0; left: 5%; line-height: 40px;
- white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
- </style>
- </head>
- <body>
- <div class="box">
- <div class="box-bar">
- </div>
- <ul>
- <li>
- 11111111111111
- </li>
- <li>
- 222222222222222
- </li>
- <li>
- 3333333333333
- </li>
- <li>
- 11111111111111
- </li>
- </ul>
- </div>
- <script>
- var oUl = document.getElementsByTagName('ul')[0];
- var oLis = document.getElementsByTagName('li');
- var oLi = document.getElementsByTagName('li')[0];
- setInterval(function() {
- oUl.style.top = oUl.offsetTop - 3 + 'px';
- if (oUl.offsetTop == -(oLis.length - 1) * oLi.clientHeight) {
- oUl.style.top = 0
- }
- },
- 200)
- </script>
- </body>
- </HTML>
来源: http://www.qdfuns.com/article/44790/292561c73ef87e8993624c7d6dac8322.html