这是我的第一个网站。我玩得很开心,但有些事情我似乎无法弄清楚。我有一个图像,我有四个较小的图像,看起来像主图像的一部分。我已经设置好了,当主图像淡出时,较小的图像会淡入,它们会飞到屏幕的一侧。为了正确定位小图像,我将它们的位置设置为主图像的位置,并且我试图让底部的两个图像将主图像宽度的一半添加到它们的高度。出于某种原因,我的 javascript/jQuery 无法正常工作。我弄乱了代码,发现当我取出变量“宽度”时代码可以工作,所以我认为这一定是我声明或调用变量的方式有问题。
这是我的一些代码:
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 脚本的链接,但链接不正确。我该如何解决?
谢谢你的帮助。