我正在尝试使用 CSS 和 JavaScript 实现 滑动滚动 视差 类型的效果。当屏幕向下滚动时，右上角的 Logo 将更改其背景以与下方形成对比。左侧还有一个导航按钮，功能相同。
到目前为止我有这个......
// Detect request animation frame
var scroll = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame
// IE Fallback, you can even fallback to onscroll
||
function(callback) {
window.setTimeout(callback, 1000 / 60)
};
var lastPosition = -1;
// my Variables
var lastSection = false;
var replaceItemTop = -1;
var replaceItemBottom = -1;
var replaceItemHeight = -1;
// The Scroll Function
function loop() {
var top = window.pageYOffset;
// my variables
// my sections to calculate stuff
var sections = document.querySelectorAll('.section');
var replaceContainer = document.querySelectorAll('.js-replace');
var replaceItem = document.querySelectorAll('.js-replace__item');
if (replaceItem.length > 0) {
// get top position of item from container, because image might not have loaded
replaceItemTop = parseInt(replaceContainer[0].getBoundingClientRect().top);
replaceItemHeight = replaceItem[0].offsetHeight;
replaceItemBottom = replaceItemTop + replaceItemHeight;
}
var sectionTop = -1;
var sectionBottom = -1;
var currentSection = -1;
// Fire when needed
if (lastPosition == window.pageYOffset) {
scroll(loop);
return false;
} else {
lastPosition = window.pageYOffset;
// Your Function
Array.prototype.forEach.call(sections, function(el, i) {
sectionTop = parseInt(el.getBoundingClientRect().top);
sectionBottom = parseInt(el.getBoundingClientRect().bottom);
// active section
if ((sectionTop <= replaceItemBottom) && (sectionBottom > replaceItemTop)) {
// check if current section has bg
currentSection = el.classList.contains('section--bg');
// switch class depending on background image
if (currentSection) {
replaceContainer[0].classList.remove('js-replace--reverse');
} else {
replaceContainer[0].classList.add('js-replace--reverse')
}
}
// end active section
// if active Section hits replace area
if ((replaceItemTop < sectionTop) && (sectionTop <= replaceItemBottom)) {
// animate only, if section background changed
if (currentSection != lastSection) {
document.documentElement.style.setProperty('--replace-offset', 100 / replaceItemHeight * parseInt(sectionTop - replaceItemTop) + '%');
}
}
// end active section in replace area
// if section above replace area
if (replaceItemTop >= sectionTop) {
// set offset to 0 if you scroll too fast
document.documentElement.style.setProperty('--replace-offset', 0 + '%');
// set last section to current section
lastSection = currentSection;
}
});
}
// Recall the loop
scroll(loop)
}
// Call the loop for the first time
loop();
window.onresize = function(event) {
loop();
};/* variables */
:root {
/* this value is going to be changed by javascript */
--replace-offset: 50%;
--replace-offset-2: calc((100% - var(--replace-offset)) * -1)
}
a {
text-decoration: none;
}
/* set image position */
img {
vertical-align: bottom;
}
.footer {
background-color: black;
color: white;
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
}
/* without fixed header this makes no sense */
.header {
position: fixed;
top: 0;
right: 0;
z-index: 9;
}
.header_nav {
position: fixed;
top: 50%;
transform: translateY(-50%);
left: 0;
z-index: 9;
}
.logo {
background-color: white;
display: inline-block;
border: solid;
padding: 10px;
border-radius: 10px;
font-size: 2em;
}
.logo a {
color: black;
}
.logo--invert {
background-color: black;
color: white;
border-color: white;
}
.logo--invert a {
color: white;
}
.sidelogo {
background-color: white;
display: inline-block;
border: solid;
padding: 10px;
border-radius: 10px;
font-size: 2em;
}
.sidelogo a {
color: black;
}
.sidelogo--invert {
background-color: black;
color: white;
border-color: white;
}
.sidelogo--invert a {
color: white;
}
.section {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
section--1 {
height: 100vh;
width: 100%;
}
.hero {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.w3schools.com/howto/photographer.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.section--2 {
background: white;
}
.section--3 {
background: black;
color: white;
}
/**
This is the interesting part
**/
/* align content above each other without absolute */
.js-replace {
display: grid;
}
.js-replace__item {
grid-row: -1 / 1;
grid-column: -1 / 1;
overflow: hidden;
will-change: transform;
}
/* item to replace with */
.js-replace__item {
transform: translateY(calc(var(--replace-offset) * 1));
}
.js-replace__content {
/* fixes problem with calculating correct height in js */
border: 1px solid transparent;
will-change: transform;
transform: translateY(calc(var(--replace-offset) * -1));
}
/* previous replace item*/
.js-replace__item--active {
transform: translateY(calc(var(--replace-offset-2) * 1));
}
.js-replace__item--active .js-replace__content {
transform: translateY(calc(var(--replace-offset-2) * -1));
}
/* REVERSE ANIMATION */
.js-replace--reverse .js-replace__item {
transform: translateY(calc(var(--replace-offset-2) * 1));
}
.js-replace--reverse .js-replace__content {
transform: translateY(calc(var(--replace-offset-2) * -1));
}
/* previous replace item*/
.js-replace--reverse .js-replace__item--active {
transform: translateY(calc(var(--replace-offset) * 1));
}
.js-replace--reverse .js-replace__item--active .js-replace__content {
transform: translateY(calc(var(--replace-offset) * -1));
}<body class="body">
<div class="header">
<!-- replace content -->
<div class="header__logo js-replace">
<!-- item to replace -->
<div class="js-replace__item js-replace__item--active">
<div class="js-replace__content">
<div class="logo"><a href="#">Logo</a></div>
</div>
</div>
<!-- end item to replace -->
<!-- item to replace with -->
<div class="js-replace__item">
<div class="js-replace__content">
<div class="logo logo--invert"><a href="#">Logo</a></div>
</div>
</div>
<!-- end item to replace with -->
</div>
<!-- end replace content -->
</div>
<div class="header_nav">
<!-- replace content -->
<div class="header__side js-replace">
<!-- item to replace -->
<div class="js-replace__item js-replace__item--active">
<div class="js-replace__content">
<div class="sidelogo"><a href="#">Nav</a></div>
</div>
</div>
<!-- end item to replace -->
<!-- item to replace with -->
<div class="js-replace__item">
<div class="js-replace__content">
<div class="sidelogo sidelogo--invert"><a href="#">Nav</a></div>
</div>
</div>
<!-- end item to replace with -->
</div>
<!-- end replace content -->
</div>
<main class="main">
<section class="section--1 section">
<div class="hero">
</div>
</section>
<section class="section--2 section section--bg">
<h1>Section 2</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p>
</section>
<section class="section--3 section">
<h1>Section 3</h1>
<p>
<strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.
</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus
turpis elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
</section>
<section class="section--4 section section--bg">
<h1>Section 4</h1>
<p>
Some great section 4 content
</p>
<ul>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
</ul>
</section>
<section class="section--5 section section--bg">
<h1 class="section__title">
Section 5
</h1>
<p>
This is some random content for section 5
</p>
</section>
</main>
<footer class="footer section">
<form action="#" method="post">
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
</div>
<div>
<h4>Radio Button Choice</h4>
<label for="radio-choice-1">Choice 1</label>
<input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />
<label for="radio-choice-2">Choice 2</label>
<input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
</div>
<div>
<label for="select-choice">Select Dropdown Choice:</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div>
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
<div>
<label for="checkbox">Checkbox:</label>
<input type="checkbox" name="checkbox" id="checkbox" />
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
</footer>
</body>
右侧的 Logo 表现符合预期，当您向下滚动页面时，背景会发生变化。
但是，左侧的导航无法正常工作，我认为它需要添加一些偏移量，因为目前它会随着导航的变化而变化
有人知道我哪里出错了吗？
最佳答案
考虑到您的代码，您将需要复制您的逻辑以使其适用于这两个元素。您需要调整第二个元素的 top 变量，使其不再是屏幕顶部，而是屏幕顶部 + 元素的偏移量。
这是另一种想法，更多地依赖 CSS 和更少的 JS 代码来获得几乎相同的结果:
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll+"px");
}:root {
--scroll-var: 0px;
}
a {
text-decoration: none;
}
/* set image position */
img {
vertical-align: bottom;
}
.footer {
background-color: #fff;
color: #000;
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
}
/* without fixed header this makes no sense */
.header {
position: fixed;
top: 0;
right: 0;
z-index: 9;
}
.header_nav {
position: fixed;
top: 50%;
transform: translateY(-50%);
left: 0;
z-index: 9;
}
.logo,
.sidelogo{
background:
repeating-linear-gradient(to bottom,
#fff 0,#fff 100vh,
#000 100vh,#000 200vh) top/100% 600vh no-repeat padding-box,
repeating-linear-gradient(to bottom,
#000 0,#000 100vh,
#fff 100vh,#fff 200vh) top/100% 600vh no-repeat border-box;
display: inline-block;
border: solid transparent;
border-radius: 10px;
font-size: 2em;
}
.logo a,
.sidelogo a{
display:block;
padding: 10px;
background:
repeating-linear-gradient(to bottom,
#000 0,#000 100vh,
#fff 100vh,#fff 200vh) top/100% 600vh no-repeat;
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.logo,
.logo a{
background-position:0 calc(-1 * var(--scroll-var));
}
.sidelogo,
.sidelogo a{
background-position:0 calc(-1 * var(--scroll-var) - 50vh + 30px);
}
.section {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
section--1 {
height: 100vh;
width: 100%;
}
.hero {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.w3schools.com/howto/photographer.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.section--2,
.footer{
background: white;
}
.section--3,
.section--5{
background: black;
color: white;
}<body class="body">
<div class="header">
<div class="logo"><a href="#">Logo</a></div>
</div>
<div class="header_nav">
<div class="sidelogo"><a href="#">Nav</a></div>
</div>
<main class="main">
<section class="section--1 section">
<div class="hero">
</div>
</section>
<section class="section--2 section section--bg">
<h1>Section 2</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
</p>
</section>
<section class="section--3 section">
<h1>Section 3</h1>
<p>
<strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.
</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
</section>
<section class="section--4 section section--bg">
<h1>Section 4</h1>
<p>
Some great section 4 content
</p>
<ul>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
</ul>
</section>
<section class="section--5 section section--bg">
<h1 class="section__title">
Section 5
</h1>
<p>
This is some random content for section 5
</p>
</section>
</main>
<footer class="footer section">
<form action="#" method="post">
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
</div>
<div>
<h4>Radio Button Choice</h4>
<label for="radio-choice-1">Choice 1</label>
<input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />
<label for="radio-choice-2">Choice 2</label>
<input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
</div>
<div>
<label for="select-choice">Select Dropdown Choice:</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div>
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
<div>
<label for="checkbox">Checkbox:</label>
<input type="checkbox" name="checkbox" id="checkbox" />
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
</footer>
</body>
它依赖于元素的渐变着色的技巧。着色应该与站点着色相反。我们的部分是 100vh 高度交替的白色/黑色因此我们使用黑色/白色渐变，我们改变每个 100vh 并覆盖整个屏幕(600vh 在这种情况下，因为我们有 6 个部分)。
然后我们使用我们在滚动时更新的简单 CSS 变量来定义背景位置。就像我们让背景在元素内部滑动，使其相对于整个文档保持固定，我们将获得需要的结果。
这种方法的缺点:
100vh 以便能够正确定义渐变。如果该部分是动态的，我们可能会考虑使用更多代码来使用更多 CSS 变量来调整渐变。background-clip:text 为文本着色，这不是 well supported in older browsers .关于渐变，我使用了 repeating-linear-gradient 因为我调整了部分以在白色和黑色之间完美交替，但如果我们没有这个，我们可以考虑一个 linear-gradient 我们可以根据需要定义每个部分的颜色。
这是一个更通用的示例(我删除了边框颜色的渐变以使其更容易)
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll + "px");
}:root {
--scroll-var: 0px;
}
body {
margin:0;
}
.header {
position: fixed;
top: 0;
right: 0;
z-index: 9;
}
.header_nav {
position: fixed;
top: 50%;
transform: translateY(-50%);
left: 0;
z-index: 9;
}
.logo,
.sidelogo {
background:
linear-gradient(to bottom,
#fff 0, #fff 100vh,
blue 100vh, blue 300vh,
red 300vh, red 400vh,
#fff 400vh, #fff 500vh,
#000 500vh, #000 600vh)
top/100% 600vh;
display: inline-block;
border: solid transparent;
border-radius: 10px;
font-size: 2em;
}
.logo a,
.sidelogo a {
display: block;
padding: 10px;
background:
linear-gradient(to bottom,
#000 0, #000 100vh,
red 100vh, red 300vh,
blue 300vh, blue 400vh,
#000 400vh, #000 500vh,
#fff 500vh, #fff 600vh)
top/100% 600vh no-repeat;
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.logo,
.logo a {
background-position: 0 calc(-1 * var(--scroll-var));
}
.sidelogo,
.sidelogo a {
background-position: 0 calc(-1 * var(--scroll-var) - 50vh + 30px);
}
.section {
min-height: 100vh;
}
.hero {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.w3schools.com/howto/photographer.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}<div class="header">
<div class="logo"><a href="#">Logo</a></div>
</div>
<div class="header_nav">
<div class="sidelogo"><a href="#">Nav</a></div>
</div>
<section class="section">
<div class="hero">
</div>
</section>
<section class="section" style="background:red;">
</section>
<section class="section" style="background:red;">
</section>
<section class="section" style="background:blue;">
</section>
<section class="section" style="background:#000;">
</section>
<section class="section" style="background:#fff;">
</section>
关于javascript - 滚动时更改 Logo div 背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53805107/
如何正确创建Rails迁移，以便将表更改为MySQL中的MyISAM？目前是InnoDB。运行原始执行语句会更改表，但它不会更新db/schema.rb，因此当在测试环境中重新创建表时，它会返回到InnoDB并且我的全文搜索失败。我如何着手更改/添加迁移，以便将现有表修改为MyISAM并更新schema.rb，以便我的数据库和相应的测试数据库得到相应更新？ 最佳答案 我没有找到执行此操作的好方法。您可以像有人建议的那样更改您的schema.rb，然后运行:rakedb:schema:load，但是，这将覆盖您的数据。我的做法是(假设
我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re
我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我尝试使用不同的ssh_options在同一阶段运行capistranov.3任务。我的production.rb说:set:stage,:productionset:user,'deploy'set:ssh_options,{user:'deploy'}通过此配置，capistrano与用户deploy连接，这对于其余的任务是正确的。但是我需要将它连接到服务器中配置良好的an_other_user以完成一项特定任务。然后我的食谱说:...taskswithoriginaluser...task:my_task_with_an_other_userdoset:user,'an_othe
我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植
假设我有一个FireNinja我的数据库中的对象，使用单表继承存储。后来才知道他真的是WaterNinja.将他更改为不同的子类的最干净的方法是什么？更好的是，我很想创建一个新的WaterNinja对象并替换旧的FireNinja在数据库中，保留ID。编辑我知道如何创建新的WaterNinja来self现有FireNinja的对象，我也知道我可以删除旧的并保存新的。我想做的是改变现有项目的类别。我是通过创建一个新对象并执行一些ActiveRecord魔法来替换行，还是通过对对象本身做一些疯狂的事情，或者甚至通过删除它并使用相同的ID重新插入来做到这一点，这是问题的一部分。
如何使用Ruby的默认Curses库获取颜色？所以像这样:puts"\e[0m\e[30;47mtest\e[0m"效果很好。在浅灰色背景上呈现漂亮的黑色。但是这个:#!/usr/bin/envrubyrequire'curses'Curses.noecho#donotshowtypedkeysCurses.init_screenCurses.stdscr.keypad(true)#enablearrowkeys(forpageup/down)Curses.stdscr.nodelay=1Curses.clearCurses.setpos(0,0)Curses.addstr"Hello
状态:我正在构建一个应用程序，其中需要一个可供用户选择颜色的字段，该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”，并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中，因此使用基
我想解析一个已经存在的.mid文件，改变它的乐器，例如从“acousticgrandpiano”到“violin”，然后将它保存回去或作为另一个.mid文件。根据我在文档中看到的内容，该乐器通过program_change或patch_change指令进行了更改，但我找不到任何在已经存在的MIDI文件中执行此操作的库.他们似乎都只支持从头开始创建的MIDI文件。 最佳答案 MIDIpackage会为您完成此操作，但具体方法取决于midi文件的原始内容。一个MIDI文件由一个或多个音轨组成，每个音轨是十六个channel中任何一个上的