jQuery滚动数字

Posted 2020-06-27 李小星

					<ul class="dateList">
						<li class="one">
							<p class="titleName">小狗</p>
							<div class="numberCon Num01">
								<span class="n1">7</span>
								<span class="n2">2</span>
								<span class="n3">1</span>
								<span class="n4">6</span>
							</div>
						</li>
						<li class="two">
							<p class="titleName">小猪</p>
							<div class="numberCon Num02">
								<span class="n1">3</span>
								<span class="n2">5</span>
								<span class="n3">8</span>
								<span class="n4">0</span>
							</div>
						</li>
						<li class="three">
							<p class="titleName">小猫</p>
							<div class="numberCon Num03">
								<span class="n1">2</span>
								<span class="n2">8</span>
								<span class="n3">9</span>
								<span class="n4">1</span>
							</div>
						</li>
					</ul>

　　

			for(var i=1;i<=4;i++){
				var n_txt = $(".Num01 .n"+i).text();
				var BPY = -(n_txt*29);
				$(".realTime .Num01 .n"+i).stop().animate({"background-position":‘0‘+" "+ BPY +‘px‘},3000)
			};
			for(var i=1;i<=4;i++){
				var n_txt = $(".Num02 .n"+i).text();
				var BPY = -(n_txt*29);
				$(".realTime .Num02 .n"+i).stop().animate({"background-position":‘0‘+" "+ BPY +‘px‘},3000)
			};
			for(var i=1;i<=4;i++){
				var n_txt = $(".Num03 .n"+i).text();
				var BPY = -(n_txt*29);
				$(".realTime .Num03 .n"+i).stop().animate({"background-position":‘0‘+" "+ BPY +‘px‘},3000)
			};

　　需要连接1.8以下的jQuery插件

<script type="text/javascript" src="../js/home/animateBackground-plugin.js"></script>