css+js实现文字向上无缝轮播！

最新推荐文章于 2024-04-01 23:44:34 发布

追逐ぢ

最新推荐文章于 2024-04-01 23:44:34 发布

阅读量498

点赞数

分类专栏： web技术栈文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43330752/article/details/96999546

版权

web技术栈专栏收录该内容

47 篇文章 1 订阅

订阅专栏

<!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>
           .box {
               width: 300px;
               height: 40px;
               margin:100px auto;
               /* overflow: hidden; */
               border: 1px solid rebeccapurple;
           }

           .box>ul {
               margin: 0;
               padding: 0;
           }

           .box>ul>li {
               list-style-type: none;
               width: 300px;
               height: 40px;
               line-height: 40px;
           }

.count {
               font-size: 24px;
           }
       </style>
   </head>
   <body>
       <div class="box">
           <ul id="box">
               <li>158****546已购买1个月</li>
               <li>158****546已购买2个月</li>
               <li>158****546已购买3个月</li>
               <li>158****546已购买4个月</li>
               <li>158****546已购买5个月</li>
               <li>158****546已购买1个月</li>
           </ul>
       </div>
       
       <script>
           window.onload = function() { //自执行函数
               sliderBox();
           }

           function sliderBox() {
               var list = document.getElementById('box'), //获取 ul
                   newPosition = 0, //这里以ul作为位移目标，newPosition为ul每次的位置
                   offset = -40; //每次要上移的数值（先默认为上移）
               if (!(this instanceof sliderBox)) {
                   return new sliderBox().init();
               }
               this.init = function() {
                   setInterval(animate, 1000);
               };

追逐ぢ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css+js实现文字向上无缝轮播！

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
复制链接

扫一扫