个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
27
4
我有一个元素，该元素具有从屏幕边缘底部弹出并循环向下弹出(虽然不是完全向下)的动画。下面的代码对此非常有用。但是，有一个问题。当浏览器全屏显示时，百分比占旧视口(viewport)大小而不是新视口(viewport)大小...关闭百分比。我该怎么办？如果也有办法，我会编写原始 javascript。
#chronoPopUp {
font-family: verdana, arial, helvetica, sans-serif;
background-color: white;
display: block;
width: 1300px;
height: 37%;
position: absolute;
z-index: 9;
margin-top: 661px;
margin-left: 60px;
-webkit-animation: slideUp 1s linear;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom: none;
}
#chronoPopDown {
-webkit-animation: slideDown 1s linear;
}
@-webkit-keyframes slideDown {
0% { -webkit-transform: translateY(0%); }
100% { -webkit-transform: translateY(75%); }
}
@-webkit-keyframes slideDownAllTheWay {
0% { -webkit-transform: translateY(0); }
100% { -webkit-transform: translateY(100%); }
}
@-webkit-keyframes slideUp {
0% { -webkit-transform: translateY(75%); }
100% { -webkit-transform: translateY(0%); }
}
HTML:
<div id="chronoPopUp" class="clickChronop">
<div id="chronoCircle" class="clickChrono">
<div id="circleLine1" class="clickChrono"></div>
<div id="circleLine2" class="clickChrono"></div>
</div>
Javascript:
var chronoListViewDisplay = function() {
var displayActive = true;
var toggleStatus = true;
var rotationAutomationSteps = [];
var automatedRotationTimer;
function toggleChronoListView(slideDown) {
var element = document.getElementById("chronoPopUp");
slideDown = typeof slideDown !== "undefined" ? slideDown : "slideDown";
console.log(slideDown);
if (toggleStatus) {
element.style.webkitAnimation = slideDown + " 1s linear forwards";
toggleStatus = false;
} else {
element.style.webkitAnimation = "slideUp" + " 1s linear forwards";
toggleStatus = true;
}
}
function rotationEngine() {
console.log("hi");
//always start with a slide up
rotationAutomationSteps[0] = setTimeout(toggleChronoListView, 2000);
toggleStatus = false;
rotationAutomationSteps[1] = setTimeout(toggleChronoListView, 4000);
}
function runAutomatedRotation() {
rotationEngine();
automatedRotationTimer = setInterval(rotationEngine, 4000);
}
return {
toggleChronoListView : toggleChronoListView,
toggleStatus: toggleStatus,
runAutomatedRotation: runAutomatedRotation,
}
}();
更新:请参阅 http://jsfiddle.net/3vecy/例如。按 F11 全屏模式将显示它不会向下滑动到与退出全屏模式相同的水平。
最佳答案
您在什么浏览器中发短信？如果这是 IE 的问题，并且您使用的是外部样式表，请尝试将其添加到您的 <link rel='stylesheet'>在你的<head> .这可能适用于其他浏览器。
<link rel='stylesheet' type='text/css' href='/nameofstylesheet.css?v=2'>
看，只需将版本查询添加到 href你的<link> .
关于javascript - CSS3 百分比值不使用调整大小的视口(viewport)，而是使用旧的视口(viewport)大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21238677/
27
4
0
我正在尝试获得一个按钮，按下该按钮时会改变颜色。当再次按下时，它应该变回原来的颜色。我究竟做错了什么？ 我的模板中的按钮: export default { data: {
我是一名优秀的程序员,十分优秀！