数字滚轮 demo

最新推荐文章于 2024-11-09 18:13:12 发布

原创最新推荐文章于 2024-11-09 18:13:12 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#实例 #JavaScript #jquery #demo #动画

涛痕世界同时被 2 个专栏收录

56 篇文章

订阅专栏

demo

18 篇文章

订阅专栏

本文展示了如何使用JavaScript和jQuery创建一个数字滚轮的动画效果。通过在div内嵌套span元素，并设置相应的动画属性，实现了滚轮向下滚动的视觉效果。详细源码可供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

这里写图片描述

思路

1、三个div中嵌套span

<div class="frame">
        <div class="box1 box">
            <span>6</span>
        </div>
        <div class="box2 box">
            <span>8</span>
        </div>
        <div class="box3 box">
            <span>9</span>
        </div>
    </div>

2、设置box类的动画属性

        .box1{
            left: 0;
            transition: transform 1s .6s;

        }
        .box2{
            left: 40px;
            transition: transform 1s .3s;
        }
        .box3{
            left: 80px;
            transition: transform 1s;
        }

3、在span上加多个span，通过向下滑动div实现滚轮效果

   for(var i=0;i<10;i++){
                $(".box").prepend(function () {
                    var text = $(this).children().html();
                    return "<span>"+text+"</span>";
                }).css("top",-100*(i+1)+"px").css("transform","translateY(1000px)");
            }

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .frame{
            overflow: hidden;
            margin: 100px auto;
            width: 120px;
            height: 50px;
            position: relative;
        }
        .box1,.box2,.box3{
            position: absolute;
            top:0;
            width: 40px;
            height: 100%;
            line-height: 50px;
            text-align: center;
            font-size: 48px;
            font-weight: bold;
        }
        .box1{
            left: 0;
            transition: transform 1s .6s;

        }
        .box2{
            left: 40px;
            transition: transform 1s .3s;
        }
        .box3{
            left: 80px;
            transition: transform 1s;
        }
        span{
            display: block;
            width:100%;
            height: 100%;
        }
    </style>
    <script src="../jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function () {
            for(var i=0;i<10;i++){
                $(".box").prepend(function () {
                    var text = $(this).children().html();
                    return "<span>"+text+"</span>";
                }).css("top",-100*(i+1)+"px").css("transform","translateY(1000px)");
            }
        })
    </script>
</head>
<body>
    <div class="frame">
        <div class="box1 box">
            <span>6</span>
        </div>
        <div class="box2 box">
            <span>8</span>
        </div>
        <div class="box3 box">
            <span>9</span>
        </div>
    </div>

</body>
</html>