使用PNG的Alpha作为附加点击/悬停事件的"热点",可能吗？
lev*_*ter 5 jquery png alpha z-index click
打开讨论 我正在寻找优化这个代码,可能是一个对象.但更重要的是,我是功能新手.我想学习传递,检索,返回变量.如果有人对此有任何好的教程链接,或者想讨论,请从这里开始.:)
我们知道,图像是矩形.我在div的单独z-index层中有一些透明的PNG.我遇到了一个问题,我试图点击其中一个图像,但它被顶部的div阻止了更高的z-index.是否可以点击通过PNG和他们的父div来实现这种效果？请参阅附图作为参考,它更能说明我的观点.
谢谢!
简而言之,出于某种原因,我认为我可以使用PNG的alpha作为hitspot.大声笑@那个想法.所以我在一个新的独立容器中创建了重叠的div,这些就是hitspots.
正如您所看到的,这是一个无限的旋转木马.点击时,点击点的z索引以及图像的z索引都会发生变化.至少可以说这是一个有趣的项目.我希望优化它,并学习如何更有效地使用函数(即传递,检索变量,返回变量等).
我希望,当我回到家时,我会发布一些有趣的对话.如果您对如何优化有任何想法,请分享!:)
(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' ]);
}(窗口,文档));
这是一个很好的问题，我通常不是一个悲观主义者，但我真的不认为你会在这里找到一个不涉及游戏规则改变的解决方案。也就是说，我建议使用 SVG 而不是 PNG。这样，您实际上可以拥有与形状边界相匹配的热点。我不确定这是否适合您的场景。查看 Rapha\xc3\xabl\xe2\x80\x94JavaScript 库。
\n\n你知道吗？您还可以利用 HTML5 Canvas 元素将光栅图像绘制到画布上，但您可能仍然需要使用 Alpha 通道作为数据手动逐步遍历每个像素以在其上构建热点。
\n\n我希望我们天生就有这种能力，但我真的不这么认为。我希望我提供了一些好的选择。
\n| 归档时间： |
|
| 查看次数： |
903 次 |
| 最近记录： |