js+css实现数字滚动效果

转自此处https://segmentfault.com/a/1190000008853924感觉逻辑有些负责,遂进行优化并错误留做以后使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RollingNumber</title>
    <style>
    .input_center{
        display: block;
        margin: 50px auto 0;
    }
    .num_span {
      border: 1px solid #911004;
      width: 184px;
      overflow: hidden;
      font-size: 20px;
      height: 20px;
      margin: 10px auto; 
    }
    .num_span span {
      float: right;
      width: 20px;
      /* 书写模式*/
      writing-mode: vertical-rl;
      /* 控制行内字符的旋转*/
      text-orientation: upright;
      margin-top: 0em; 
      -webkit-transition: margin-top 1.5s ease-out;
      -o-transition: margin-top 1.5s ease-out;
      transition: margin-top 1.5s ease-out;
    }
	span{
		font-size:1em;
	}
	</style>
</head>
<body>
    <input type="text" class="input_center" id="valueRGB" placeholder="请输入最大9位的数字">
<div class="num_span">
    <span class="one">0123456789</span>
    <span class="two">0123456789</span>
    <span class="three">0123456789</span>
    <span class="four">0123456789</span>
	<span class="five">0123456789</span>
	<span class="six">0123456789</span>
	<span class="seven">0123456789</span>
	<span class="eight">0123456789</span>
	<span class="nine">0123456789</span>
</div>
</div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <script>
    $("#valueRGB").on("change",function(){
        let val = parseInt($(this).val());
        if(0<=val<100000){
            console.log(val);
            animate_RGB($(this).val());
        }
    });
    function animate_RGB(rgb){
		rgb=PrefixInteger(rgb,9);
		console.log(rgb);
		let arr = [];
        let strs = rgb.split("");
        let $div = $(".num_span");
		let numLength=strs.length;
		clearAllEm($div);
		$div.find('.one').css('margin-top',-strs[8]+'em');
		$div.find('.two').css('margin-top',-strs[7]+'em');
		$div.find('.three').css('margin-top',-strs[6]+'em');
		$div.find('.four').css('margin-top',-strs[5]+'em');
		$div.find('.five').css('margin-top',-strs[4]+'em');
        $div.find('.six').css('margin-top',-strs[3]+'em');
        $div.find('.seven').css('margin-top',-strs[2]+'em')
        $div.find('.eight').css('margin-top',-strs[1]+'em')
        $div.find('.nine').css('margin-top',-strs[0]+'em');
		
    }
	function clearAllEm(event){//清空所有格状态
		event.find('span').css('margin-top','0em');
	}
    function PrefixInteger(num, n) {//连接字符串前面补0
            return (Array(n).join(0) + num).slice(-n);
        }
</script>
</body>
</html>

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值