14、《Monster Mashup项目开发：jQuery动画效果实战》

《Monster Mashup项目开发：jQuery动画效果实战》

1. 项目概述

Monster Mashup应用旨在通过让特定年龄段的儿童混合10种不同的头部、眼睛、鼻子和嘴巴来“混搭”自己的怪物头部，从而达到娱乐目的。怪物面部各部分之间的过渡需要进行动画处理，同时还要实现闪电闪烁的效果。

2. 用户界面设置

在完成怪物混搭的可视化布局后，接下来要设置用户界面的其余部分，主要是通过点击操作来触发相应的效果。每个区域（头部、眼睛、鼻子、嘴巴）需要跟踪点击次数，每点击9次后，图像条应“倒带”回到开头。

以下是使 div#head 元素可点击的代码示例：

$(document).ready(function(){
    $("#head").click(function(){
        if (headclix < 9){
            headclix += 1;
        }
        else {
            headclix = 0;
        }
    });
});
var headclix = 0;

通过这种方式，可以实现对点击次数的跟踪，并在达到9次点击后重置点击次数。

为了使眼睛、鼻子和嘴巴元素也可点击，可以按照类似的模式编写代码：

$(document).ready(function(){
    var headcli