使用jQuery的JavaScript Sprite动画

上周，我报告了使用百分比定位背景图像的测试 。 今天的帖子是我将这项研究付诸实践的过程，该帖子于本周早些时候在2007年7月的“设计视图”中发布。

走进一家真正的'n'砂浆书店，最美好的事情之一就是毫不费力地随意翻阅任何一本喜欢你的书–并不是说你特别地读过任何东西，但这只是一种获得一般的好方法其布局，样式和质量感。

虽然很难通过屏幕（与指尖相比）传达有关纸张和装订质量的信息，但我们的市场经理Shayne和我开始怀疑，是否有可能通过触摸一下来重现一些轻松的“页面轻拂”感觉JavaScript。

我们第一个想法的结果就是在这里 -适当地推广Kevin和Cam的新JavaScript入门，尽管这实际上并不是本书内容的一部分。

尽管非常欢迎您在我们的网站上浏览实时版本以了解其效果，但在这里，我将逐步简化您的独立版本。

它有点长，但是很难在不遗漏潜在重要内容的情况下将其缩短得更短。

第一部分：起点

我在项目初期就做出了一些决定：

1. 我希望最终产品尽可能地灵活，这样我就可以添加或减少页面并更改页面大小，而不必对代码进行重大更改。
2. 我需要将所有单独的书页（介于8页和16页之间）包含在一个大的扁平渲染图像中（ 如此图 ）。 这意味着我可以保证我的所有页面图像都在点击的第一个迹象时就被下载并“准备好摇摆”。这还意味着我可以将翻页的渲染3D元素覆盖在单独的可重复使用的PNG层上（如下图所示）。 显然，这是为我们的蓝色和橙色页面的页眉和页脚设置的 ，因此您可能需要生成一个纯白色的版本以供其他书籍使用。仅显示页面的中心三分之一，仅使我们得到内部书脊的阴影曲线-非常适合为打开的书增加一些深度。 当我们的用户尝试向前或向后“翻动”页面时，我们可以将此背景图像分别对准书的右侧或左侧。 这三个简单的框架对于创建翻页的错觉有很大帮助。
3. 我想将解决方案基于jQuery ，因为它易于学习的语法，小巧的尺寸（20k）和速度。

第二部分：结构

我们将使用的标记结构是四个div的构造。

1. div#leftpage ：左侧页面
2. div#rightpage ：右侧页面
3. div#flip ：页面之间的中点
4. div#turner ：将整个东西包装在一起的包装器

div#flip设置为' position:absolute '，因此我们可以将其浮动在脊椎区域的中央。

其他三个div都设置为position:relative ，并向左浮动，以便它们整齐地堆叠在一起。 我将页面尺寸设置为189px x 146px，但是这些尺寸没有什么特别的-它们恰好是我可用的页面区域的合适尺寸。

一旦我们的页面将我们的图像插入其div背景中， 我们的静态书就准备就绪 ，等待jQuery使之跳舞。

第三部分：JavaScript

1）设置

是时候弄脏我们的双手了。 我们需要做的第一件事是将jQuery附加到我们的文档中，并添加一个新的脚本标签以包含我们的自定义脚本。

 

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript>

/* our script goes here */

</script>

2）设置一些有用的变量

我们有几次需要多次使用的数字，因此将它们存储在变量中很有意义。 这意味着，如果我们以后决定更改页面大小，则只需要在两个地方更新脚本即可。 变量名称在描述它们的含义方面做得很好：

/* Page sizes*/

var $pageheight = 189; // our page height
var $pagewidth = 146; // our page width
var $pageYpos = 0;  // current Y position of our bg-image

3）设置我们的“就绪”活动

我喜欢jQuery的一件事是它的简单文档就绪事件 ，它是老式onLoad事件的强大替代品。

只要需要的位可用，就会在此“就绪事件”中放置任何代码。 看起来像这样：

$(document).ready(function(){
// Your code here
});

令人高兴的是，jQuery的ready事件将在其所需的部分下载后立即开始工作-老式的onLoad事件必须等到页面完全完成加载为止。 如果您开始尝试使用jQuery进行更多试验，您会发现自己经常使用此功能。

4）使#leftpage div可点击

我们书本图像的标记不包含任何链接，因此目前尚无可点击的“钩子”作为我们翻页动画的基础。

不过，这没什么大不了的- #leftpage几行，我们就可以告诉jQuery注意在#leftpage查看点击，然后在每次在其中注册一次点击时执行许多任务。 代码如下：

 $("#leftpage").click(function(){
   /* do stuff when they click on #leftpage */

});

5）单击以重新定位我们的背景图像

好吧，现在我们到了某个地方！ 当用户点击leftpage ，我们将首先计算将背景图像移动多远，然后再将其移动。 我们将顶部的起始Y位置（ $pageYpos ）设置为零，因此我们只需要添加一个“页面高度”单位，即可将背景图像移动到下一个页面位置。 我们将其表示为$pageYpos = $pageYpos + $pageheight 。 单击一次后， $pageYpos的值为189，单击两次后为278，依此类推。

然后，我们使用该值重新定位背景图像。 这是执行重新定位的代码片段：

$("#leftpage").click(function(){

$pageYpos = $pageYpos + $pageheight;

 $("#leftpage").css("background-position", "0px"+$pageYpos+"px");

});

在上面的代码中，我们选择#leftpage并使用jQuery的内置css函数来重新定位其背景图形。

如果我们现在尝试该代码 ，我们将看到事情终于开始发生！ 单击#leftpage的左侧应立即捕捉背景图像以显示下一页。 这项精灵技术的妙处在于，我们的背景会自动平铺-当我们到达最后一帧时，第一页会滚动并且循环继续。 真好！

6）显示页面转向

接下来，我们需要告诉jQuery将div的背景位置设置在右上角，以显示图形的翻页部分。 将其添加到我们的click事件中很简单：

$("#flip").css("background-position", "top right");

7）移除翻页并更改右侧页面

如果我们遵循相同的逻辑，则不难预测下一个代码片段的外观。 首先，我们需要将#flip返回其默认的中心位置：

$("#flip").css("background-position", "top center");

接下来，我们需要在右侧页面上显示下一页。 我们已经知道了新的Y位置（ $pageYpos ），因为我们使用它重新定位了左侧页面背景。

$("#rightpage").css("background-position", "146px"+$pageYpos+"px");

8）延迟翻页效果

好的，现在我们有了正确的动画序列-更改左手页面，显示翻页图形，隐藏翻页图形和更改右页。

问题是，这些步骤都发生得如此之快，以至于我们甚至都看不到翻页动画。 我们需要一种在脚本清除翻页图形并继续之前暂时延迟脚本的方法。 在JavaScript中控制时间的最常见方法是通过“ setTimeout”函数。

“ setTimeout”需要两个参数：您要执行的操作，以及您要执行该操作之前要等待的时间（以毫秒为单位）。 例如，如果要在五秒钟后弹出警报，则可以使用以下代码：

setTimeout ("alert('Five seconds has passed!)'", 5000);

我们需要做的就是将最后两个CSS更改放入自己的“ setTimeout”函数中。 我将两者的延迟都设置为200毫秒，但您可能想根据自己的喜好进行调整。 实际上，将右侧页面设置为稍后动画（例如300毫秒）的动画，可能更接近现实世界中翻书时的情况。

/* return flip to default position */
setTimeout ('$("#flip").css("background-position", "top center");', 200); 

/* change right page  */
setTimeout ('$("#rightpage").css("background-position", "146px "+$pageYpos+"px");', 200); 

一切就在这里-将这些代码放到脚本中可以为我们提供一个简单但相对令人信服的动画，而无需编写大量代码。

9）转到右侧页面

为了使这个本来已经很广的文章的版本保持在半合理的长度，在这里，我不会逐步完成为正确的页面制作动画的整个过程。 可以说这是我们左侧页面功能的镜像。 与其增加背景Y位置，我们不减去它，而是使用备用页面图形。 自己动手做一下， 或在此处查看完成的演示 。

现在，如果您想“ 稍等片刻 ，那看起来与sitepoint.com上的版本不太一样 ”，那您是对的。 生产版本：

1. 动画有一个额外的角落页面卷曲部分
2. 具有额外的滑动动画效果，可以使每个页面在放置时都轻松到位（这很细微，但是您会注意到的）
3. 并不引人注目-意味着我们实际上将一个花园式的IMG标签加载到原始页面中，然后使用jQuery将其即时替换为上面概述的DIV结构。 任何在未启用JavaScript的情况下访问页面的人都至少可以访问原始页面图像

当然，请随时尝试在此处添加或改进这些部分。 这是我们的第一个版本，我已经有了改进版本的原始概念。 显然，该技术当前存在内置的缩放限制-将所有页面保留在一个图形上可确保缓存图形，但是添加的每个页面都会增加初始下载要求。

也许将来的版本可能会同时加载页面块以达到平衡？

From: https://www.sitepoint.com/javascript-sprite-animation-using-jquery/