Question

这是我的第一个网站。我很开心，但有些事我似乎无法弄明白。我有一个图像，我有四个较小的图像，看起来像主图像的一部分。我进行了设置，以便较小的图像在主图像淡出时淡入，然后飞到屏幕的一侧。为了正确定位小图像，我将它们的位置设置为主图像的位置，并且我试图让底部的两个图像将一半的主图像宽度添加到它们的高度。出于某种原因，我的javascript / jQuery不起作用。我已经搞乱了代码，发现当我取出变量“width”代码时，我觉得它必须是我声明或调用变量的方式的问题。

以下是我的一些代码：

HTML：

<img class="fmsmall smallbutton" src="Images/FacilityMaintenance 2.png" />

<img class="lightsmall smallbutton" src="Images/Lighting.png" />

<img class="pssmall smallbutton" src="Images/PowerSweeping.png" />

<img class="landsmall smallbutton" src="Images/Landscaping.png" />

CSS：

#logoBig {
position: fixed;
left: 50%;
margin-left: -20%;
width: 40%;
top: 15%;

}

.pssmall {
    position: fixed;
    left: 50%;
    margin-left: -20%;
    width: 20%;
    top: 15%;
    z-index: 100;
}

.landsmall {
    position: fixed;
    left: 50%;
    width: 20%;
    top: 15%;
    z-index: 100;
}

的javascript / jQuery的：

function categoryClick( beforeClickButton, 
                        afterClickButton, 
                        subcategoryMenu,
                        subcategoryHeader, 
                        leftClickBefore, 
                        topClickBefore, 
                        leftClickAfter, 
                        topClickAfter,
                        low
                        ){

    $(beforeClickButton).click(function()
        {

        $(afterClickButton).fadeIn("fast");



/*Here's the code that isn't working*/
        var width = $("#logobig").width();

        if(low = true){
            $(afterClickButton).animate(  {
                top: "+=" + (width / 2) + "px"
            });
        }



        $(".categoryButton").hide();

        $("#logoBig").fadeOut("slow");
        $("#selectCategory").delay(250).fadeOut("slow");

        $(afterClickButton).delay(250).animate({
            left: leftClickBefore,
            top: topClickBefore
            }, "slow");

        $(subcategoryHeader).delay(250).fadeIn("slow")
        $(subcategoryMenu).delay(1000).fadeIn("slow");
        $("#accordion").fadeIn("slow");

        $(afterClickButton).delay(500).one("click", function(){

            $(this).animate({
                left: leftClickAfter,
                top: topClickAfter
            }, "slow");

            $(subcategoryHeader).delay(250).fadeOut("slow");
            $(".categoryButton").show();
            $("#logoBig").delay(600).fadeIn("slow");
            $("#selectCategory").delay(500).fadeIn("slow");
            $(afterClickButton).delay(250).fadeOut("fast");
            $(subcategoryMenu).fadeOut("slow");

        });

        var icons = {
                    header: "ui-icon-circle-arrow-e",
                    activeHeader: "ui-icon-circle-arrow-s"
                    };
        $(subcategoryMenu).accordion({ collapsible: true,
                                    header: ".menuItem",
                                    heightStyle: "content",
                                    active: false,
                                    icons: icons
                                    });  

    });




}


categoryClick(          ".facilityMaintenance", 
                        ".fmsmall", 
                        ".fmMenu", 
                        ".fmHeader",
                        "-=30%", 
                        "-=25%", 
                        "+=30%", 
                        "+=25%",
                        false
                        );


categoryClick(          ".lighting", 
                        ".lightsmall", 
                        ".lightMenu",
                        ".lightHeader", 
                        "-=50%", 
                        "-=20%", 
                        "+=50%", 
                        "+=20%",
                        false
                        );


categoryClick(          ".powerSweeping", 
                        ".pssmall", 
                        ".psMenu", 
                        ".psHeader",
                        "-=32%", 
                        "-=55%", 
                        "+=32%", 
                        "+=55%",
                        true
                        );


categoryClick(          ".landscaping", 
                        ".landsmall", 
                        ".landMenu", 
                        ".landHeader",
                        "-=50%", 
                        "-=55%", 
                        "+=50%",  
                        "+=55%",
                        true
                        );

实际网站位于我公司的服务器上，所以我只是将一份副本放在免费服务器上发布。这是一个链接。错误消息不会显示在实际站点上。

http://www.pcsinternal.net76.net/newcontractportal/go.html

关于错误消息，我在第一行设置了一个密码保护PHP脚本的链接，但它没有正确链接。我该如何解决这个问题？

感谢您的帮助。

你如何让Javascript将一个元素的宽度添加到另一个元素的高度？

0 个答案: