1 回答

TA貢獻(xiàn)1883條經(jīng)驗(yàn) 獲得超3個(gè)贊
您可以創(chuàng)建一個(gè)面部對(duì)象來(lái)保存每個(gè)面部部件的點(diǎn)擊計(jì)數(shù),還可以創(chuàng)建一個(gè)處理點(diǎn)擊事件的函數(shù)(下面名為 clickHandler)。clickHandler 接受id并在具有該 的元素上調(diào)用適當(dāng)?shù)膭?dòng)畫(huà)函數(shù)id。
檢查如下:
var face = {
"headClicks" : 0,
"eyesClicks" : 0,
"noseClicks" : 0,
"mouthClicks" : 0,
"clickHandler" : function(id) {
if(this[id+"Clicks"] < 9) {
animateLeft367(id);
this[id+"Clicks"]++;
} else {
animateLeft0(id);
this[id+"Clicks"] = 0;
}
}
}
function animateLeft367(id) {
$("#" + id).animate({left: "-=367px"}, 500);
console.log('animated ' + id + ' 367');
}
function animateLeft0(id) {
$("#" + id).animate({left: "0px"}, 500);
console.log('animated ' + id + ' 0');
}
$(".face").click(function() {
face.clickHandler(this.id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pic_box">
<div id="head" class="face"><img src="images/headsstrip.jpg"></div>
<div id="eyes" class="face"><img src="images/eyesstrip.jpg"></div>
<div id="nose" class="face"><img src="images/nosesstrip.jpg"></div>
<div id="mouth" class="face"><img src="images/mouthsstrip.jpg"></div>
</div>
- 1 回答
- 0 關(guān)注
- 137 瀏覽
添加回答
舉報(bào)