- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我一直在尝试让 flipclock.js 完全响应,但一直失败。有没有人做到这一点?如果是这样,我将如何使它起作用?感谢您的时间。我试图将所有内容都转换为百分比,但没有像我预期的那样工作。我正在使用带有此插件的 Twitter Bootstrap 。
这是我的 flipclock.js 的 CSS:
/* Get the bourbon mixin from http://bourbon.io */
/* Reset */
.countdown {
postion:relative;
width: 39%;
}
.flip-clock-wrapper {
margin-left: 8% !important;
max-width: 100%;
font: normal .75em "Helvetica Neue", Helvetica, sans-serif;
-webkit-user-select: none;
}
.flip-clock-wrapper * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-clock-wrapper a {
cursor: pointer;
text-decoration: none;
color: #ccc; }
.flip-clock-wrapper a:hover {
color: #fff; }
.flip-clock-wrapper ul {
list-style: none; }
.flip-clock-wrapper.clearfix:before,
.flip-clock-wrapper.clearfix:after {
content: " ";
display: table; }
.flip-clock-wrapper.clearfix:after {
clear: both; }
.flip-clock-wrapper.clearfix {
*zoom: 1; }
.flip-clock-meridium {
background: none !important;
box-shadow: 0 0 0 !important;
font-size: 300% !important; }
.flip-clock-meridium a { color: #313333; }
.flip-clock-wrapper {
text-align: center;
position: relative;
width: 100%;
margin: 100%;
}
.flip-clock-wrapper:before,
.flip-clock-wrapper:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.flip-clock-wrapper:after {
clear: both;
}
/* Skeleton */
.flip-clock-wrapper ul {
position: relative;
float: left;
margin: 0.7%;
width: 8%;
height: 1.1em;
font-size: 7.2em;
font-weight: bold;
line-height: 7.2em;
border-radius: 10%;
background: #000;
}
.flip-clock-wrapper ul li {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 1em;
text-decoration: none !important;
}
.flip-clock-wrapper ul li:first-child {
z-index: 2; }
.flip-clock-wrapper ul li a {
display: block;
height: 100%;
-webkit-perspective: 100%; /*200px*/
-moz-perspective: 100%;
perspective: 100%;
margin: 0 !important;
overflow: visible !important;
cursor: default !important; }
.flip-clock-wrapper ul li a div {
z-index: 1;
position: absolute;
left: 0;
width: 100%;
height: 50%;
font-size: 1em;
overflow: hidden;
outline: 1% solid transparent; } /*1px*/
.flip-clock-wrapper ul li a div .shadow {
position: absolute;
width: 100%;
height: 100%;
z-index: 2; }
.flip-clock-wrapper ul li a div.up {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
top: 0; }
.flip-clock-wrapper ul li a div.up:after {
content: "";
position: absolute;
top: 1%;/*44px*/
left: 0;
z-index: 5;
width: 100%;
height: .02em;/*3px*/
background-color: #000;
background-color: rgba(0, 0, 0, 0.4); }
.flip-clock-wrapper ul li a div.down {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
bottom: 0;
border-bottom-left-radius: 1%;/*6px*/
border-bottom-right-radius: 1%;/*6px*/
}
.flip-clock-wrapper ul li a div div.inn {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 200%;
color: #ccc;
text-shadow: 0 20% 3% #000; /* 0 1px 2px #000*/
text-align: center;
background-color: #333;
border-radius: 9%; /* 0 1px 2px #000*/
font-size: 1em; } /* 70px*/
.flip-clock-wrapper ul li a div.up div.inn {
top: 0; }
.flip-clock-wrapper ul li a div.down div.inn {
bottom: 0; }
/* PLAY */
.flip-clock-wrapper ul.play li.flip-clock-before {
z-index: 3; }
.flip-clock-wrapper .flip { box-shadow: 0 2% 6% rgba(0, 0, 0, 0.7); } /* 0 2px 5px rgba(0, 0, 0, 0.7);*/
.flip-clock-wrapper ul.play li.flip-clock-active {
-webkit-animation: asd 0.5s 0.5s linear both;
-moz-animation: asd 0.5s 0.5s linear both;
animation: asd 0.5s 0.5s linear both;
z-index: 5; }
.flip-clock-divider {
float: left;
display: inline-block;
position: relative;
width: 3%; /* 20px*/
height: 9em; } /* 100px*/
.flip-clock-divider:first-child {
width: 0; }
.flip-clock-dot {
display: block;
background: #323434;
width: 50%;/* 10px*/
height: 1em; /* 10px*/
position: absolute;
border-radius: 50%;
box-shadow: 0 0 3% rgba(0, 0, 0, 0.5);
left: 20%; } /* 5px*/
.flip-clock-divider .flip-clock-label {
position: absolute;
top: -1.5em;
right: -7.5em; /* 86px*/
color: black;
text-shadow: none; }
.flip-clock-divider.minutes .flip-clock-label {
right: -7.6em; } /* 88px*/
.flip-clock-divider.seconds .flip-clock-label {
right: -7.9em; } /* 88px*/
.flip-clock-dot.top {
top: 2.4em; } /* 30px*/
.flip-clock-dot.bottom {
bottom: 2.4em; } /* 30px*/
@-webkit-keyframes asd {
0% {
z-index: 2; }
20% {
z-index: 4; }
100% {
z-index: 4; } }
@-moz-keyframes asd {
0% {
z-index: 2; }
20% {
z-index: 4; }
100% {
z-index: 4; } }
@-o-keyframes asd {
0% {
z-index: 2; }
20% {
z-index: 4; }
100% {
z-index: 4; } }
@keyframes asd {
0% {
z-index: 2; }
20% {
z-index: 4; }
100% {
z-index: 4; } }
.flip-clock-wrapper ul.play li.flip-clock-active .down {
z-index: 2;
-webkit-animation: turn 0.5s 0.5s linear both;
-moz-animation: turn 0.5s 0.5s linear both;
animation: turn 0.5s 0.5s linear both; }
@-webkit-keyframes turn {
0% {
-webkit-transform: rotateX(90deg); }
100% {
-webkit-transform: rotateX(0deg); } }
@-moz-keyframes turn {
0% {
-moz-transform: rotateX(90deg); }
100% {
-moz-transform: rotateX(0deg); } }
@-o-keyframes turn {
0% {
-o-transform: rotateX(90deg); }
100% {
-o-transform: rotateX(0deg); } }
@keyframes turn {
0% {
transform: rotateX(90deg); }
100% {
transform: rotateX(0deg); } }
.flip-clock-wrapper ul.play li.flip-clock-before .up {
z-index: 2;
-webkit-animation: turn2 0.5s linear both;
-moz-animation: turn2 0.5s linear both;
animation: turn2 0.5s linear both; }
@-webkit-keyframes turn2 {
0% {
-webkit-transform: rotateX(0deg); }
100% {
-webkit-transform: rotateX(-90deg); } }
@-moz-keyframes turn2 {
0% {
-moz-transform: rotateX(0deg); }
100% {
-moz-transform: rotateX(-90deg); } }
@-o-keyframes turn2 {
0% {
-o-transform: rotateX(0deg); }
100% {
-o-transform: rotateX(-90deg); } }
@keyframes turn2 {
0% {
transform: rotateX(0deg); }
100% {
transform: rotateX(-90deg); } }
.flip-clock-wrapper ul li.flip-clock-active {
z-index: 3; }
/* SHADOW */
.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.3s linear both; }
/*DOWN*/
.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.2s linear both; }
@-webkit-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-moz-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-o-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-webkit-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@-moz-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@-o-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
最佳答案
试试这个 -您可以控制翻转时钟的大小(请参阅 - https://github.com/objectivehtml/FlipClock/issues/13)通过在你的 css 中创建新类(尽管使用 sass 更好):
.your-clock{
zoom: 0.5;
-moz-transform: scale(0.5)
}
了解这些后,通过使用 sass,您可以创建 mixin 以根据屏幕大小控制缩放和 -moz-transform
例如,在 sass 中创建一个 mixin 文件,其中包含 -
// Responsive mixins
=screen-xs
@media all and (max-width: 320px)
@content
=screen-sm
@media all and (max-width: 479px)
@content
=screen-md
@media all and (max-width: 768px)
@content
=screen-lg
@media all and (max-width: 900px)
@content
=screen-xl
@media all and (max-width: 1300px)
@content
现在只需将它添加到您的 flipclock 类以通过屏幕尺寸控制缩放:
.myflipclock
zoom: 0.8
-moz-transform: scale(0.8)
+screen-md
zoom: 0.6
-moz-transform: scale(0.6)
+screen-sm
zoom: 0.45
-moz-transform: scale(0.45)
等...
希望对你有帮助
关于javascript - 使 FlipClock.js 响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26099709/
我正在尝试在我的网站上设置 Flipclock.js,但无论我做什么它似乎都没有加载,chrome 给了我以下错误: 未捕获类型错误:无法调用 null 的方法“FlipClock” 我的代码布局如下
我正在使用 FlipClock.js 开发一个从 1:00 分钟到 0 的简单倒计时器,我的问题是,它不会计数到 0,然后当它重置时,它应该从 00:59 开始是 1:00。我不知道为什么,但在 00
如何在时间结束后重新启动 flipclock? var clock; $(document).ready(function() { clock = new FlipClock($('.cloc
我试图在不重置刷新时间的情况下进行倒计时。我只需要倒计时 1 小时,但我不希望它在刷新时重置。从服务器获取当前时间和过期时间不起作用,因为我想通过单击重置该计时器。这是我当前的 js 代码:
我在我的网站上添加了一个翻转时钟倒计时计时器,我想要一种每分钟触发一个事件的方法,以便我可以对源中的元素进行更改。我尝试在代码中添加一个警报以查看是否触发了回调,但我很确定我不太了解回调方法的文档。我
我正在使用 jQuery FlipClock显示给定日期时间的倒计时器。因此,为了在 FlipClock 中显示给定日期和时间的倒计时器,我得到了 this关联。 就我而言,结束日期是 8th Dec
我正在尝试在 7 个不同的 Raspberry Pis 上获取事件监视器。他们都获得了加载了 FlipClock 的相同网页。 我的问题是:RasPis 上的时间不同。 (他们无法获得实际的 ptb-
我正在尝试集成flipclock网页上的计时器,将倒计时到明天中午 12 点。 让它工作后,当计时器少于一天、一小时一分钟时,我想分别隐藏天、小时和分钟 FIDDLE var date = new
我正在使用FlipClock 1.1a我想在倒计时结束时设置图像并隐藏计数器。目前,当时间到时,计数器会进入 - 时间(-1 小时,-12 分钟)。我怎样才能做到这一点?该网站的回调很少,而且没有帮助
我想为 flipclock 添加一个年计数器,但“天”似乎是现成支持的最大单位。 如何修改以将年份添加为显示计数器之一? 最佳答案 对于任何感兴趣的人,我将以下内容添加到 flipclock.js 中
我正在尝试使 FlipClock JS 倒计时到此标记中指定的日期: (jQuery)(document).ready(function() { clocks.push((j
我正在与 Flipclock 作斗争 http://flipclockjs.com/ 。我浏览了他们的网站,但找不到有关如何更改时间的提示。 我想要做的是设置我想要显示的时间。问题是某些智能电视上的浏
我的 Flipclock 在我的网站上运行良好,但我需要将“天:小时:分钟:”文本更改为白色,但找不到要添加/修改的 css 另外(我使用的是 bootstrap3)我不能让 Flipclock 居中
所以我已经设置了 Flipclock,它可以正常工作,但没有按我希望的方式工作 这是代码: endtimeYear: 0, endtimeMonth: 0, endti
我有一个使用 flipclock.js 的网站。我在将它变大时遇到了一些麻烦,因此它在页面上占用了更多空间。 有谁知道如何放大或扩大它? 最佳答案 添加这个 sass,你就完成了.... .count
我有一个 FlipClock.js在除 iPhone 以外的所有设备和浏览器中完美显示的页面上。 在 iPhone(4、4S、5、6)上,它用数字填充滚动标签,如下图所示。 有没有人遇到过这个,也许可
我想在初始化 FlipClock 时从 HTML 元素获取一个属性。请不要在页面中存在多个 FlipClock 对象。时钟的 HTML 标记是: 如何在“init”回调函数中获取“2015-09-
我正在使用flipclock,我想在其上设置东部时间。我该如何做到这一点?我已放置了 moment.js,我可以使用它来获取当前的东部时间。但问题是,我不知道要向 flipclock 对象的 setT
我正在使用 Justin Kimbrell FlipClock.js(来自 Flipclockjs.com),如下所示: $(function(){ FlipClock.Lang.Custom
我需要 Flipclock.js 方面的帮助,我对 Jquery 一无所知,这个插件快把我逼疯了。我只需要将日期更改为 2014 年 11 月 23 日下午 6 点,但我似乎无法弄清楚这一点。 这是我
我是一名优秀的程序员,十分优秀!