背景颜色属性向上滑动
Posted
技术标签:
【中文标题】背景颜色属性向上滑动【英文标题】：Background color property slide up 【发布时间】：2011-04-07 16:21:34 【问题描述】：问题在 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>
【问题讨论】：
【参考方案1】：这是一个使用带有两个 div 的切换功能的示例：http://jsfiddle.net/SmAHU/（大致基于 Nick011 的回复）
【讨论】：
它有效，但不幸的是，我不再需要它了。不过还是谢谢。【参考方案2】：您可能希望使用 jQuery 的 .toggle() 函数而不是 if 语句，因为它允许您在多个选项之间切换，在这种情况下是您的 bg 颜色。你不能用一个让绿色在蓝色上滑动。您需要创建第二个 div 并将显示设置为无。然后 onclick 使用滑动和隐藏功能在两个图层之间切换。
<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 上的文档。
【讨论】：
两个 div 和 slideUp() 工作，但你应该校对你的代码（或至少你的 CSS，其中有 'z-index='）。z-index 根本不需要，但我无法让 slideDown() 工作。以上是关于背景颜色属性向上滑动的主要内容，如果未能解决你的问题，请参考以下文章
如何让 UIPageControl 的背景颜色随着页面滑动而改变？