用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - html代码库

翻页板小脚本

2022-01-28 作者: baipiaozhe举报

[html]代码库

<!DOCTYPE html>
<--源码仅供学习交流,请勿用于商业用途-->
<--制作:baipiaozhe-->
<--发布网站:www.yuncode.net-->
<head>
<meta charset="UTF-8">
<title>numboard</title>
 
<link rel="stylesheet" href="lib/style/scrollboard.css">
<script src="lib/scripts/jquery-1.10.2.js"></script>
<script src="lib/scripts/scrollboard.js"></script>
<script src="lib/scripts/countboard.js"></script>
 
</head>
<body>
 
<div class="container">
    <div style="padding-top: 5em;">
        <div style="color: white;text-align: center;">含小数</div>
        <div class="number-box numberRun1"></div>
    </div>
     
    <div style="padding-top: 5em;">
        <div style="color: white;text-align: center;">不含小数</div>
        <div class="number-box numberRun2"></div>
    </div>
    <div style="padding-top: 5em;">
        <div style="color: white;text-align: center;">另外一种滚动效果</div>
        <div class="number-box" id="countRun"></div>
    </div>
</div>
 
<script>
     
    $(function(){
        //翻页效果
        setNumberRun1();
        let stationTimer = setInterval(() => {
            setNumberRun1();
        }, 3000 * 10);
         
        //翻页效果
        var numRun = $(".numberRun2").numberAnimate({
            num: 4532,
            dot: 0,
            speed: 2000,
        });
         
        $("#countRun").rollNum({
            deVal:"3251.05"
        });
    })
     
    function setNumberRun1(){
         var numRun = $(".numberRun1").numberAnimate({
            num: 1236,
            dot: 2,
            speed: 2000,
        });
    }
 
</script>
 
<div style="text-align:center;margin:1px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

[代码运行效果截图]


翻页板小脚本

[源代码打包下载]




网友评论    (发表评论)

共2 条评论 1/1页

发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...