我想在我的网站上添加一个文本框来捕获单个电子邮件地址。在它的背后,我希望滚动(或滑动)图像成为该字段应该是什么的“提示”。
示例:http://steamboat.com/ - 页面顶部的“时事通讯注册”。
我可以找到很多提供纯文本“提示”的 jQuery 插件。我应该从哪里开始寻找添加这种额外的影响?
注意:我不想在页面上添加任何flash元素。
最佳答案
你可以用普通的 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 个像素。您可以提供一个固定值或根据图像高度或其他任何因素得出它。如果我们已完成此循环的所有步骤,则停止间隔并为重启功能设置更长的超时时间。
关于javascript - 如何创建一个在单击之前具有滚动背景图像的 HTML 文本字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2517846/