背景颜色属性向上滑动
背景颜色属性向上滑动
提问于 2010-09-03 12:51:01
问题出在transitionBackground函数中。在这种情况下，当页面上的向上按钮被按下时，该函数被触发。
<html>
<head>
<title>Case: Background Transitions</title>
<script src="jquery/jquery.js"></script>
<script>
$(
var transitionBackground = function (){
if ($(div).css("background") === "blue"){
//convert to green by having the green background start at the bottom,
//and slide up (over say, a period of 1 second)
//I'll up vote a pure-css, pure-js, or a jquery answer,
//but I prefer jquery or pure-css answers.
//Thanks in advance.
} else {
//convert back to blue if pressed again.
//you don't have to do this;
}
};
var arrowDown = {left:false, right:false, up:false, down:false};
var arrow = {left: 37, up: 38, right: 39, down: 40 };
$(document.documentElement).keydown(function (e) { //a key was clicked
var keyCode = e.keyCode || e.which
switch (e.keyCode) {
case arrow.up: //the up key was clicked/pressed
if (arrowDown.up === false){ //tell if clicked or pressed
transitionBackground();
}
arrowDown.up = true
break;
default: //other keys
return true;
break;
}
return false; //stop default behavior
});
$(document.documentElement).keyup(function (e) { //a key was relased
var keyCode = e.keyCode || e.which
switch (e.keyCode) {
case arrow.up: //the up key was released
arrowDown.left = false;
break;
default: //other keys
return true;
break;
}
return false; //stop default behavior
});
);
</script>
</head>
<body>
<div style="height: 3em; width: 3em; background:blue"></div>
</body>回答 2
Stack Overflow用户
回答已采纳
发布于 2010-10-01 09:39:14
下面是一个使用带有两个div的切换函数的示例：http://jsfiddle.net/SmAHU/ (大致基于Nick011的回复)
Stack Overflow用户
发布于 2010-09-03 15:34:21
您可能希望使用jQuery的.toggle()函数，而不是if语句，因为它允许您在多个选项之间切换，在本例中是您的bg颜色。你不能让绿色在蓝色上滑行。您需要创建第二个div并将display设置为none。然后单击鼠标，使用滑动和隐藏功能在两个层之间切换。
<script type="text/javascript">
var transitionBackground = function (){
$(div).toggle(
function(){
$(div).hide();
},
function(){
$(div).slideUp();
}
);
});
</script>
<div id="container">
<div style="height: 3em; width: 3em; background:blue; position:absolute; z-index:1"></div>
<div style="height: 3em; width: 3em; background:green; position:absolute; z-index=2; display:none;"></div>
</div>如果逐字逐句地使用，这可能不会运行，但至少应该为您提供一个起点。我会查看jquery.com上的文档。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3633115
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号