• 无缝上下滚动轮播图


    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <style>
            *{
                margin:0;
                padding:0;
            }
            #container{
                height:170px;
                500px;
                background:teal;
                margin:200px;
                overflow:hidden;
                position:relative;
            }
            #box{
                position:absolute;
                left:0;
                top:0;
            }
            ul{
                list-style:none;    
            }
        </style>
        <body>
            <div id="container">
                <div id="box">
                    <ul>
                        <li>好好学习天天向上,困了累了想想mm,想想sg,加油11</li>
                        <li>好好学习天天向上,困了累了想想mm,想想sg,加油1</li>
                        <li>好好学习天天向上,困了...</li>
                        <li>好好学习天天向上,困了累了想想mm,想想sg,加油1</li>
                        <li>好好学习天天向上,困了累了想想mm,想想sg,加油1</li>
                        <li>好好学习天天向上,困了累了...</li>
                        <li>好好学习天天向上,困了累了想想mm,想想sg,加油1</li>
                        <li>好好学习天天向上,困了...</li>
                        <li>好好学习天天向上,困了累了想想mm,想想sg,加油1</li>
                        <li>好好学习天天向上,困了累了想想mm,想想sg,加油10</li>
                    </ul>
                    <ul>
                        <li>好好学习天天向上,困了累了想想mm,想想sg,加油11</li>
                        <li>好好学习天天向上,困了累了想想mm,想想sg,加油1</li>
                        <li>好好学习天天向上,困了...</li>
                        <li>好好学习天天向上,困了累了想想mm,想想sg,加油1</li>
                        <li>好好学习天天向上,困了累了想想mm,想想sg,加油1</li>
                        <li>好好学习天天向上,困了累了...</li>
                        <li>好好学习天天向上,困了累了想想mm,想想sg,加油1</li>
                        <li>好好学习天天向上,困了...</li>
                        <li>好好学习天天向上,困了累了想想mm,想想sg,加油1</li>
                        <li>好好学习天天向上,困了累了想想mm,想想sg,加油10</li>
                    </ul>
                </div>
            </div>
        </body>
    </html>
    <script src="../public.js"></script>
    <script>
        var timer = null;
        var num = 0;
        timer = setInterval( function(){
            num--;
            $id("box").style.top = num + "px";
            if( num < -( $id("box").children[0].offsetHeight ) ){
                num = 0;
            }
        },30 )
    </script>
  • 相关阅读:
    corntab e 执行sql脚本
    Java批量操作及分页
    log4j.xml和log4j2.xml配置应用日志与业务日志分离
    如何将vue项目部署到nginx服务器
    从零搭建Pytorch模型教程(四)编写训练过程参数解析
    STM32Cumebx HAL库实现STM32 USB虚拟串口的收发
    js 判断数据类型的几种方法
    Win10 电脑右下角任务栏网络图标突然消失解决方案
    Navicat Premium 16 永久破解激活
    788. 逆序对的数量
  • 原文地址:https://www.cnblogs.com/tis100204/p/10328844.html
Copyright © 2020-2023  润新知