html滚动示例

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>滚动测试</title>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js" crossorigin="anonymous"></script>
</head>
 
<body>
    <div class="dvScroll" style="height:210px;overflow-y: hidden;">
        <div class="list_item">1测试文字测试文字测试文字测试文字测试文字测试文字</div>
        <div class="list_item">2测试文字测试文字测试文字测试文字测试文字测试文字</div>
        <div class="list_item">3测试文字测试文字测试文字测试文字测试文字测试文字</div>
        <div class="list_item">4测试文字测试文字测试文字测试文字测试文字测试文字</div>
        <div class="list_item">5测试文字测试文字测试文字测试文字测试文字测试文字</div>
        <div class="list_item">6测试文字测试文字测试文字测试文字测试文字测试文字</div>
        <div class="list_item">7测试文字测试文字测试文字测试文字测试文字测试文字</div>
        <div class="list_item">8测试文字测试文字测试文字测试文字测试文字测试文字</div>
        <div class="list_item">9测试文字测试文字测试文字测试文字测试文字测试文字</div>
        <div class="list_item">10测试文字测试文字测试文字测试文字测试文字测试文</div>
        <div class="list_item">11测试文字测试文字测试文字测试文字测试文字测试文</div>
        <div class="list_item">12测试文字测试文字测试文字测试文字测试文字测试文</div>
        <div class="list_item">13测试文字测试文字测试文字测试文字测试文字测试文</div>
        <div class="list_item">14测试文字测试文字测试文字测试文字测试文字测试文</div>
        <div class="list_item">15测试文字测试文字测试文字测试文字测试文字测试文</div>
    </div>
</body>
<script>
    $(function () {
        setInterval(function () {
            scroll($(".dvScroll"), 5)
        }, 2000);
    })
 
    //数据滚动
    function scroll(parent, maxCount) {
        var children = $(parent).children()
        if (children.length > maxCount) {
            var first = $(children).first();
            var height = first.height()
            first.animate({
                height: 0
            }, 500, function () {
                $(parent).append(first.css('height', height))
            });
        }
    }
</script>
 
</html>

　　

posted @   兴趣就是天赋  阅读(26)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
相关博文：
·  C#验证码
·  Newtonsoft.Json 之HtmlEncodeConverter
·  html消息滚动
·  文字滚动demo
·  简单 数字滚动 效果 限制位数 上线滚动
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae