5

开放讨论 我正在寻找优化此代码，可能会创建一个对象。但更重要的是，我是新手。我想学习传递、检索、返回变量。如果有人对此有任何好的教程链接，或者想讨论，请从这里开始。:)

众所周知，图像是矩形。我在单独的 z-index 图层上的 div 中有一些透明的 PNG。我遇到了一个问题，我试图点击其中一张图片，但它被顶部的 div 以更高的 z-index 阻止了。是否可以通过 PNG 及其父 div 单击来实现此效果？请参阅附图作为参考，它更好地说明了我的观点。

谢谢！

图像

简而言之，出于某种原因，我认为我可以使用 PNG 的 alpha 作为热点。哈哈@那个主意。因此，我在一个新的单独容器中创建了覆盖 div，它们充当了热点。

img2

如您所见，这是一个无限轮播。命中点的 z-index 以及图像的 z-index 在点击时会发生变化。至少可以说这是一个有趣的项目。我正在寻找优化它，并学习如何更有效地使用函数（即传递、检索变量、返回变量等）。

我希望我回家后会发布 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">' + '&nbsp' + 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' ]);

}（窗口，文档））；

4

3 回答 3

1

尝试pointer-eventscss属性：

CSS 属性 pointer-events 允许作者控制在什么情况下（如果有）特定图形元素可以成为鼠标事件的目标。如果未指定此属性，则 visiblePainted 值的相同特征适用于 SVG 内容。

除了指示该元素不是鼠标事件的目标之外，值 none 还指示鼠标事件“通过”该元素并以该元素“下方”的任何内容为目标。

https://developer.mozilla.org/en/CSS/pointer-events

于 2012-05-08T21:43:40.043 回答
0

这是一个很好的问题，我通常不是悲观主义者，但我真的不认为你会在这里找到不涉及游戏规则改变的解决方案。也就是说，我建议使用 SVG 而不是 PNG。这样，您实际上可以拥有与您的形状边界相匹配的热点。我不确定这是否适用于您的场景。查看 Raphaël — JavaScript 库。

你知道吗？您可能还可以使用 HTML5 Canvas 元素将光栅图像绘制到画布上，但您可能仍需要手动逐步遍历每个像素以在其上构建热点，使用 alpha 通道作为数据。

我希望我们有这种能力，本地人，但我真的不这么认为。我希望我给出了一些好的选择。

于 2012-05-08T21:40:32.507 回答
0

一个有趣的方法是使用 CSS 属性pointer-events:none，这会禁止元素接收任何悬停和点击事件。相反，它会将其传递给下面的元素。

您可以查看这个非常有用的讨论以获取有关此问题的更多详细信息。

此外，请注意此 CSS 属性的浏览器兼容性。您可能需要研究一下它的兼容性以及与哪些版本的明确答案。

这是我的简短研究：

来自 Mozilla 开发网络的指针事件兼容性

“我可以使用吗？”中的指针事件兼容性

指针事件教程和一些兼容性说明

于 2012-05-08T21:54:11.393 回答