杨小杰Blog(Youngxj)提供免费教程下载和网站搭建技术教程,主要分享和发布网站源码,致力创造一个高质量网络资源教程的分享平台

emlog侧边栏复古翻牌时钟效果

Young小杰2017-2-8 22:57 网站搭建(0)2779小标签: emlog emlog插件 涛先森 emlog优化 emlog博客

emlog侧边栏复古翻牌时钟效果。(涛先森原创)

小编发现,本博客的后边侧边栏总是觉得空空的,反复思索了一下,决定加个时钟

但是时钟现在的人体艺术时钟已经泛滥,思索着整一个新的。

放出效果

emlog侧边栏复古翻牌时钟效果

就是现在博客侧边栏的时钟。

修改之前的原先效果在这:

emlog侧边栏复古翻牌时钟效果

经过大小的修改,去掉了【秒】的时间。终于在侧边栏完美显示了

这边用到了两个JS和CSS事件。

教程来了:

在后台的侧边栏加入自定义组件,写入以下代码:

<head>
<link href="http://young.s-api.yunvm.com/wl/tp/fliptimer.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="dowebok" style="text-align:center">
	<div class="hours"></div>
	<div class="minutes"></div>
</div>
<script src="http://young.s-api.yunvm.com/wl/tp/jquery-1.11.3.min.js"></script>
<script src="http://young.s-api.yunvm.com/wl/tp/jquery.fliptimer.js"></script>
<script>
$(function(){
	$('.dowebok').flipTimer({
		minutes: true
	});
});
</script>
</body>

里面调用的JS和CSS我上传到了我自用的外链,稳定可靠,当然你也可以自己把js和css放到自己的网站里面!

如果外链失效请下载css or js文件自行使用

原文地址:《emlog侧边栏复古翻牌时钟效果

css or js大小:36.1KB | 来源:本地下载
本文最后更新于2017-2-8,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

发表评论:

手机扫描二维码
阅读体验更佳