仿造百度经验分享翻牌数字效果做纸牌数字时钟特效

发布时间：2017-10-12, 15:59:15 分类：HTML | 编辑 off 网址 | 辅助

图集1/3

正文 2692字数 618,666阅读

百度经验回享计划翻牌数字效果

<style>
#iswtf-d-cimg .date{
    width: 24px;
    height: 30px;
    display: inline-block;
	float: left;
    background: url(https://lizhenqiu.com/tmp/nums_8b3bfc0.png) 0 -261px;
}
#iswtf-d-cimg i{
	display: inline-block;
    height: 28px;
    width: 12px;
    text-align: center;
    font-style: normal;
	float: left;
	line-height: 28px;
}
</style>
<div id="iswtf-d-cimg">
	<span class="date date-ht"></span>
	<span class="date date-ho"></span>
	<i>:</i>
	<span class="date date-mt"></span>
	<span class="date date-mo"></span>
	<i>:</i>
	<span class="date date-st"></span>
	<span class="date date-so"></span>
</div>
<script type="text/javascript" src="https://lizhenqiu.com/templates/default/jquery.min.js"></script>
<script>
function startTime(){
	var today=new Date();
	
	var h=today.getHours();
	var ho=geto(h);
	var ht=gett(h);
	
	var m=today.getMinutes();
	var mo=geto(m);
	var mt=gett(m);
	
	
	var s=today.getSeconds();
	var so=geto(s);
	var st=gett(s);

	var dimg=[];
	dimg['0']='-261';
	dimg['1']='0';
	dimg['2']='-29';
	dimg['3']='-58';
	dimg['4']='-87';
	dimg['5']='-116';
	dimg['6']='-145';
	dimg['7']='-174';
	dimg['8']='-203';
	dimg['9']='-232';
	
	// add a zero in front of numbers<10
	/*m=checkTime(m);
	s=checkTime(s);*/
	/*document.getElementById('txt').innerHTML=h+":"+m+":"+s;
	t=setTimeout('startTime()',500);*/
	if($('.date-ho').attr('d')!=ho) $('.date-ho').animate({backgroundPositionY:+dimg[ho]+'px'},'slow',function(){
		d(this,ho);
	});
	if($('.date-ht').attr('d')!=ht) $('.date-ht').animate({backgroundPositionY:+dimg[ht]+'px'},'slow',function(){
		d(this,ht);
	});
	
	if($('.date-mo').attr('d')!=mo) $('.date-mo').animate({backgroundPositionY:+dimg[mo]+'px'},'slow',function(){
		d(this,mo);
	});
	if($('.date-mt').attr('d')!=mt) $('.date-mt').animate({backgroundPositionY:+dimg[mt]+'px'},'slow',function(){
		d(this,mt);
	});
	
	if($('.date-so').attr('d')!=so) $('.date-so').animate({backgroundPositionY:+dimg[so]+'px'},'slow',function(){
		d(this,so);
	});
	$('.date-st').animate({backgroundPositionY:+dimg[st]+'px'},'slow',function(){
		d(this,st);
	});
}
function d(that,n){
	$(that).attr('d',n);
}
function geto(a){
	return parseInt(a%10);//获取个位
}
function gett(a){
	return parseInt((a%100)/10);//获取十位
}
startTime();
setInterval('startTime()',1000);
</script>

Run code

Cut to clipboard

数字电子时钟效果图：

（支付宝）给作者钱财以资鼓励（微信）→

lizhenqiu blog

仿造百度经验分享翻牌数字效果做纸牌数字时钟特效

相关日志

有过 2 条评论 »

留下評論