javascript - 如何创建一个在单击之前具有滚动背景图像的 HTML 文本字段？

Question

我想在我的网站上添加一个文本框来捕获单个电子邮件地址。在它的背后，我希望滚动(或滑动)图像成为该字段应该是什么的“提示”。

示例:http://steamboat.com/ - 页面顶部的“时事通讯注册”。

我可以找到很多提供纯文本“提示”的 jQuery 插件。我应该从哪里开始寻找添加这种额外的影响？

注意:我不想在页面上添加任何flash元素。

Answer 1

你可以用普通的 javascript 来做到这一点。

初始化:获取对输入元素的引用。使用样式属性设置背景图像

emailInput.style.backgroundImage = "url('emailbackground.png')";
emailInput.style.backgroundPosition = '0px 0px';

还声明变量以跟踪运行的 y 偏移量、图像的像素高度，如果您想要像在汽船上那样交错滚动，您移动了多少步和一个 timerID。

您将有两个函数 - 一个将启动一个间隔计时器，图像的位置将发生变化，另一个将调用第一个函数以在您暂停背景时重新开始间隔。

首先是“开始”方法:

function startScrolling() {
    // start the process of moving the image
    stepCounter = 0;
    timerID = setInterval(updateScrolling, 10);
}

“更新”方法:

function updateScrolling() {

    // update the y offset
    stepCounter++;
    y = (stepCounter * 1) % imageHeight;
    emailInput.style.backgroundPosition = '0px ' + (-y).toString() + 'px';

    // check for changes to timing
    if (stepCounter >= steps) {
        clearInterval(timerID);
        timerID = setTimeout(startScrolling, 1000);
    }
}

此示例设置为每走一步移动 1 个像素。您可以提供一个固定值或根据图像高度或其他任何因素得出它。如果我们已完成此循环的所有步骤，则停止间隔并为重启功能设置更长的超时时间。