0

我以前见过几次这样做。我不记得其他网站，但如果你知道其他我想看看。（https://gumroad.com/）

基本上，当他们执行以下操作时：

将您的“歌曲”直接分享给您的“粉丝”。并且引号中的单词不断被替换。

我想知道是否有一个 JS/Jquery 库可以帮助解决这个问题。或者，我想要一些其他的网站，这样我就可以得到想法！

谢谢。

4

3 回答 3

3

我使用 jQuery 实现了类似的东西（没有动画）。

该代码基本上每 2000 毫秒循环一次数组中的数据，并将其添加到跨度中。

现场演示 - http://jsfiddle.net/Dogbert/vF4rj/3/

JS：

var options = [
    ["music", "listeners"],
    ["software", "users"],
    ["films", "viewers"],
    ["comics", "readers"]
];

var interval = 2000;

var holder1 = $(".holder-1"), holder2 = $(".holder-2");
var currentIndex = 0;

function doIt() {
    holder1.html(options[currentIndex][0]);
    holder2.html(options[currentIndex][1]);
    currentIndex = (currentIndex + 1) % options.length;
    setTimeout(doIt, interval);
}

doIt();

HTML：

<h2>
    Sell
    <span class="holder-1"></span>
    directly to your
    <span class="holder-2"></span>
</h2>
于 2013-11-10T12:53:13.420 回答
2

如果您对他们的方法感兴趣，他们似乎正在这样做：

  1. 他们的代码中有两次标题文本。一个是你看到的动画。另一个通过将其不透明度设置为 0 来隐藏。此隐藏版本将用于对显示的版本进行任何计算。
  2. 隐藏版本通过将新文本插入占位符span标签来更新其文本。显示的版本在该位置有占位符，它们是空白，并且它们的宽度通过使用隐藏版本的新宽度进行动画处理。
  3. 隐藏版本还用于确定新文本相对于句子其余部分的位置，并且基于该信息，包含该文本的 HTML 元素被动画化以完美地落入应有的位置。

一个非常聪明的方法。

于 2013-11-19T22:40:06.817 回答
0

让 Gumroad 工作的原因是流畅的动画，所以如果没有这个基本元素，我觉得答案是不完整的。

话虽这么说，d3 javascript 库 (d3js.org) 具有非常好的基本功能实现以及对转换的支持。关键代码如下，可让您轻松指定要应用的 css 转换类型（请参见最后一行）：

var svg = d3.select("body").append("svg")
         .attr("width", width)
         .attr("height", height)
         .append("g")
         .attr("transform", "translate(32," + (height / 2) + ")");

一个完整的例子可以在这里查看：http: //bl.ocks.org/mbostock/3808234

于 2014-07-07T19:44:54.320 回答