开放讨论 我正在寻找优化这段代码，可能会创建一个对象。但更重要的是，我对函数还很陌生。我想学习传递、检索、返回变量。如果有人对此有任何好的教程链接，或者想讨论，请从这里开始。 :)
众所周知，图像是矩形。我在单独的 z-index 图层上的 div 内部有一些透明的 PNG。我遇到了一个问题，我尝试单击其中一张图像，但它被上面的具有较高 z-index 的 div 挡住了。是否可以通过单击 PNG 及其父级 div 来实现此效果？请参阅附图作为引用，它更好地说明了我的观点。
谢谢!
简而言之，出于某种原因，我认为我可以使用 PNG 的 alpha 作为命中点。哈哈@这个想法。因此，我在一个新的单独容器中创建了覆盖 div，并将它们用作命中点。
如您所见，这是一个无限轮播。点击时，命中点的 z 索引以及图像的 z 索引会发生变化。至少可以说，这是一个有趣的项目。我正在寻求优化它，并学习如何更有效地使用函数(即传递、检索变量、返回变量等)。
我希望当我回到家时我会发布 JavaScript 来引发一些有趣的对话。如果您有任何关于如何优化的想法，请分享! :)
(function (w, d) {
$(w).load(function () { //window load
preload();
$('#info div a:not([rel=ad])').find('img').hide(); //hides 'learn more' buttons
}); //end window.load
$(d).ready(function () { //document ready
onHover(); //activate hover
onClick(); //activates click function
}); //end document.ready
var isFirst = ["1"], //flag to see if the first click was triggered on a hotspot or not
pxPos = ["1px", "399px", "577px", "782px", "969px", "1162px", "1330px"], //pixel position where we will animate the targets
name = ["bill", "sophia", "brian", "jenn", "mom"], //names of talent; array used
thisZ = 0; //z-index used later to swap current target to front, and move others behind current
$('.left, .right').hide();
function onHover () { //hover function -- note: 'thisName' is a different variable in this f(n) than in onClick()
$('.hit').hover(function () {
var _this = this,
thisName = $(_this).parent().attr('id'),
img = '_img/' + thisName + '.png';
$(_this).parent().next().find('img').attr('src', img);
}, function() {
var _this = this,
thisName = $(_this).parent().attr('id'),
img = '_img/' + thisName + '-d.png';
if (!($(this).parent().next().hasClass('current'))) {
$(_this).parent().next().find('img').attr('src', img);
}
})
}
function onClick () {
$('a.left').bind('click', function (e) {
e.preventDefault();
//left arrow click function
if (!$('.p').is(":animated")) { //checks if animation is running and prevents click action
pos = 'p5';
var o = [name[1],name[2],name[3],name[4],name[0]];
name = o;
var thisName = name[3];
updateArr(thisName, pos);
}; //end if animated
})
$('a.right').bind('click', function (e) { //right arrow click function
e.preventDefault();
if (!$('.p').is(":animated")) { //checks if animation is running and prevents click action
pos = 'p3';
var o = [name[4],name[0],name[1],name[2],name[3]];
name = o;
var thisName = name[3];
updateArr(thisName, pos);
} //end if animated
})
$('.hit').bind('click', function () { //click function
if (!$('.p').is(":animated")) { //checks if animation is running and prevents click action
var _this = this;
var thisName = $(_this).parent().attr('id'); //name of person who is clicked on
if(isFirst[0] === "1") { //execute actions on first click
$('h1').hide();
$('.left, .right').fadeIn().show(); //fade in arrows
$('#bg2').fadeIn().show(); //fade in dark bg
var pos = checkPosition(_this); //checks position of clicked person
updateArr(thisName, pos); //update array
isFirst[0] = "2"; //sets flag to "not first click"
}else if(isFirst[0] === "2") { //all other clicks but the first click
var pos = checkPosition(_this); //checks position of clicked person
updateArr(thisName, pos); //update array
} //end if
} //end if animated
}) //end hit check
}
function checkPosition (_this, thisName) { //find current position and return
var pos;
if($(_this).parent().next().hasClass('p1')) {
pos = 'p1';
}else if($(_this).parent().next().hasClass('p2')) {
pos = 'p2';
}else if($(_this).parent().next().hasClass('p3')) {
pos = 'p3';
}else if($(_this).parent().next().hasClass('p4')) {
pos = 'p4';
}else if($(_this).parent().next().hasClass('p5')) {
pos = 'p5';
}
return pos;
} //end checkClickPosition()
function updateArr (thisName, pos) { //update array
// find person index in array
for(l=0; l <= name.length; l++) {
if(thisName == name[l]) {
var thisIndex = l;
}
} //end for
// search for index by matching index to position in array. create new array.
if(thisName === name[thisIndex]) {
var o = [];
if(thisIndex === 0) {
o = [name[2],name[3],name[4],name[0],name[1]];
}else if(thisIndex === 1) {
o = [name[3],name[4],name[0],name[1],name[2]];
}else if(thisIndex === 2) {
o = [name[4],name[0],name[1],name[2],name[3]];
}else if(thisIndex === 3) {
o = [name[0],name[1],name[2],name[3],name[4]];
}else if(thisIndex === 4) {
o = [name[1],name[2],name[3],name[4],name[0]];
}
name = o; //update array with new array
updateFlags(); //update current flag
} //end if
//removes previous hilight and current class
$.each($('.p'), function () {
if(($(this).attr('class').length > 5)) {
var oldImg = $(this).find('img').attr('src');
img = '_img/' + $(this).prev().attr('id') + '-d.png';
$(this).find('img').attr('src', img);
$(this).removeClass('current');
}
});
//creates new hilight
$('#' + thisName).next().addClass('current');
img = '_img/' + thisName + '.png';
$('#' + thisName).next().find('img').attr('src', img);
updateZIndex(); //update z-indexes
animate(pos); //animates array
var current = thisName;
return disorderText(current);
} //end updateArr()
function updateFlags() {
//removes position flags
$('.p').each (function() {
$(this).removeClass('p1 p2 p3 p4 p5');
}); //end each
//add new flags
for(i=0; i < name.length; i++) {
$('#' + name[i]).next().addClass('p' + (i + 1));
} //end for
} //end updateFlags()
function updateZIndex (thisZ) {
//re-orders hotspot z-indexes
$("#" + name[3]).children().each(function(thisZ) {
thisZ++;
$(this).css({'z-index': thisZ + 800});
});
$("#" + name[4]).children().each(function(thisZ) {
thisZ++;
thisZ = thisZ + 1;
$(this).css({'z-index': thisZ + 700});
});
$("#" + name[2]).children().each(function(thisZ) {
thisZ++;
thisZ = thisZ + 1;
$(this).css({'z-index': thisZ + 600});
});
$("#" + name[1]).children().each(function(thisZ) {
thisZ++;
thisZ = thisZ + 1;
$(this).css({'z-index': thisZ + 500});
});
$("#" + name[0]).children().each(function(thisZ) {
thisZ++;
thisZ = thisZ + 1;
$(this).css({'z-index': thisZ + 400});
});
$('.p1').css({'z-index': 40});
$('.p2').css({'z-index': 50});
$('.p3').css({'z-index': 60});
$('.p4').css({'z-index': 70});
$('.p5').css({'z-index': 30});
} //end updateZIndex()
function animate (pos) {
//set up selector names for hitspot container and image container
var selector1 = '#' + name[0] + ', #' + name[0] + 'i',
selector2 = '#' + name[1] + ', #' + name[1] + 'i',
selector3 = '#' + name[2] + ', #' + name[2] + 'i',
selector4 = '#' + name[3] + ', #' + name[3] + 'i',
selector5 = '#' + name[4] + ', #' + name[4] + 'i',
easeType = 'easeOutCubic',
easeOutType = 'easeOutCubic';
if (pos === 'p1') {
$(selector1).animate({'left': pxPos[6]}, 400, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[0]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[1]}, 600, easeType); //p5
$(selector2).animate({'left': pxPos[6]}, 400, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[0]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[2]}, 600, easeType); //p1
$(selector3).animate({'left': pxPos[6]}, 400, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[0]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[3]}, 600, easeType); //p2
$(selector4).animate({'left': pxPos[4]}, 1350, easeType); //p3
$(selector5).animate({'left': pxPos[5]}, 1350, easeType); //p4
}else if (pos === 'p2') {
$(selector1).animate({'left': pxPos[6]}, 400, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[0]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[1]}, 700, easeType); //p5
$(selector2).animate({'left': pxPos[6]}, 400, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[0]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[2]}, 700, easeType); //p1
$(selector3).animate({'left': pxPos[6]}, 400, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[0]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[3]}, 700, easeType); //p2
$(selector4).animate({'left': pxPos[4]}, 1550, easeType); //p3
$(selector5).animate({'left': pxPos[5]}, 1550, easeType); //p4
}else if (pos === 'p3') {
$(selector1).animate({'left': pxPos[6]}, 200, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[0]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[1]}, 500, easeType); //p5
$(selector2).animate({'left': pxPos[2]}, 700, easeType); //p1
$(selector3).animate({'left': pxPos[3]}, 700, easeType); //p2
$(selector4).animate({'left': pxPos[4]}, 700, easeType); //p3
$(selector5).animate({'left': pxPos[5]}, 700, easeType); //p4
}else if (pos === 'p4') {
$(selector1).animate({'left': pxPos[1]}, 500, easeType); //p5
$(selector2).animate({'left': pxPos[2]}, 700, easeType); //p1
$(selector3).animate({'left': pxPos[3]}, 700, easeType); //p2
$(selector4).animate({'left': pxPos[4]}, 700, easeType); //p3
$(selector5).animate({'left': pxPos[5]}, 700, easeType); //p4
}else if (pos === 'p5') {
$(selector1).animate({'left': pxPos[1]}, 700, easeType); //p5
$(selector2).animate({'left': pxPos[2]}, 700, easeType); //p1
$(selector3).animate({'left': pxPos[3]}, 700, easeType); //p2
$(selector4).animate({'left': pxPos[4]}, 700, easeType); //p3
$(selector5).animate({'left': pxPos[0]}, 200, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[6]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[5]}, 500, easeType); //p4
}
} //end animate()
function disorderText (current) {
var _this = ['swd', 'osa', 'nar'],
swd = "Of the 15 million Americans who work evening or night shirts, 25% may have shift work disorder.",
osa = "18 million Americans suffer from OSA.",
nar = "Narcolepsy affects 1 in every 2,000 Americans.",
link = "<a href=''><img src='_img/learn-more.png' width='125' height='31' class='learn_more' /></a>",
brian_quote = '"' + "I get enough sleep during the day, but I'm still exhausted at work." + '"',
sophia_quote = '"' + "Since I started working nights, I struggle to stay awake." + '"',
jenn_quote = '"' + "I'm so tired on my shift that it's hard to do my job" + '"',
bill_quote = '"' + "I struggle to stay awake even outside of work - I'm almost dozing off at my son's Little League games." + '"',
mom_quote = '"' + "Quote to come." + '"',
i = 0,
p_name = "",
quote = "",
info = "",
disorderArr = ["_this", "swd", "osa", "nar", "link", "brian_quote", "sophia_quote", "jenn_quote", "bill_quote", "mom_quote", "i", "pname"];
$('#info').children().each (function () {
$(this).removeClass('open');
$(this).find('.content').html('<p>');
});
switch(current) {
case 'brian' : i = 0;
p_name = '<h2><b>Alex,</b> Bartender</h2>';
info = swd;
quote = brian_quote;
break;
case 'sophia' : i = 0;
p_name = '<h2><b>Sophia,</b> EMT</h2>';
info = swd;
quote = sophia_quote;
break;
case 'jenn' : i = 0;
p_name = '<h2><b>Susan,</b> Nurse</h2>';
info = swd;
quote = jenn_quote;
break;
case 'bill' : i = 1;
p_name = '<h2><b>Martin,</b> Real Estate</h2>';
info = osa;
quote = bill_quote;
break;
case 'mom' : i = 2;
p_name = '<h2><b>Susan,</b> Mom</h2>';
info = nar;
quote = mom_quote;
break;
}
$('#' + _this[i]).addClass('open');
//handles information swap
$('#info').children().each (function () {
if($(this).hasClass('open')) {
$(this).find('.header span').addClass('down');
$(this).children().find('a img').show(); //show 'learn more' button
$(this).find('.content').addClass('disorder');
}else if(!$(this).hasClass('open')) {
//$(this).children().find('a').hide(); //hide 'learn more' button
$(this).find('.header span').removeClass('down');
$(this).find('.content').removeClass('disorder');
}
}); //end show/hide 'learn more' button
return $('#' + _this[i]).find('.content').html(p_name + '<p class="gen_quote"><i>' + quote + '</i></p>' + '<p class="gen_info"><b>' + info + '</b></p>' + '<p class="learn-more">' + ' ' + link);
}
function preload(imgArray) {
$(imgArray).each(function(){
$('<img/>')[0].src = this;
});
}
preload([ '_img/ad.png', '_img/arrow_sm_d.png', '_img/arrow_sm.png', '_img/arrow-left.png', '_img/arrow-right.png', '_img/bill-d.png', '_img/bill.png', '_img/border.png', '_img/brian-d.png', '_img/brian.png', '_img/corner.png', '_img/hit.gif', '_img/jenn-d.png', '_img/jenn.png', '_img/mom-d.png', '_img/mom.png', '_img/sidebar-bg.png', '_img/sophia-d.png', '_img/sophia.png', '_img/stone-bg-d.jpg', '_img/stone-bg.jpg' ]);
}(窗口，文档))；
最佳答案
尝试pointer-events css属性:
The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events. When this property is unspecified, the same characteristics of the visiblePainted value apply to SVG content.
In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.
关于jquery - 使用 PNG 的 Alpha 作为 "hotspot"来附加单击/悬停事件，可能吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10506859/