sprite mesh动画_使用jQueryJavaScript Sprite动画

sprite mesh动画

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

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

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

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

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

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

第一部分：起点

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

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

第二部分：结构

我们将使用的标记结构是四个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附加到我们的文档中，并添加一个新的脚本标签以包含我们的自定义脚本。