Jquery 使用CSS使图像正确定位/分层
我们的团队正试图为我们网站上销售的产品创建一个滑出式选项板 出于某种原因，CSS正在影响我们，让我们的图像正确分层是一件痛苦的事情。在过去，z-index确实起到了作用，但现在我们必须测试随机样式和变通方法，以远程获取我们正在寻找的内容 目前，我们有一个具有绝对内容的相对div，它应该已经为您的布局设计师升起了一个红旗 一切都按其应有的功能运行，但为什么不能正常工作？我会提供一个例子，从我们的ftp，但由于某种原因，我的互联网出现了问题，我不能得到的内容上传 现在，我们的消息来源如下：Jquery 使用CSS使图像正确定位/分层,jquery,html,css,jquery-ui,z-index,Jquery,Html,Css,Jquery Ui,Z Index,我们的团队正试图为我们网站上销售的产品创建一个滑出式选项板 出于某种原因，CSS正在影响我们，让我们的图像正确分层是一件痛苦的事情。在过去，z-index确实起到了作用，但现在我们必须测试随机样式和变通方法，以远程获取我们正在寻找的内容 目前，我们有一个具有绝对内容的相对div，它应该已经为您的布局设计师升起了一个红旗 一切都按其应有的功能运行，但为什么不能正常工作？我会提供一个例子，从我们的ftp，但由于某种原因，我的互联网出现了问题，我不能得到的内容上传 现在，我们的消息来源如下： <
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript">
function move(name){
if (name.style.left == "500px")
{
$(name).animate({left: 0}, 300);
}
else if(name.style.left == "0px")
{
$(name).animate({left: 500}, 300);
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Test</title>
</head>
<body>
<div class="item">
<div id="top" style="z-index:1; position: absolute; top:0px; left:0px; width:500px; height:375px;">
<img src="images/car1.jpg" />
</div>
<div id="bottom" style="z-index:-1; position:absolute; top: 0px; left:0px; width:550px; height:375px;">
<img src="images/car2.jpg" />
<div class="optionsExpandButton" style=" position:absolute; left: 500px; width:50px; height:375px; background-color: #000; z-index:inherit; float:left" onclick="move(bottom);"></div>
</div>
</div>
</body>
</html>
功能移动（名称）{
如果（name.style.left==“500px”）
{
$（名称）.animate（{left:0}，300）；
}
else if（name.style.left==“0px”）
{
$（名称）.animate（{left:500}，300）；
}
}
JQuery测试
<div class="item">
<div id="top">
<img src="http://img814.imageshack.us/img814/8089/car1j.jpg" alt="..." />
</div>
<div id="bottom">
<img src="http://img178.imageshack.us/img178/3779/car2dy.jpg" alt=".." />
</div>
<div class="optionsExpandButton"></div>
</div>
$(function() {
$(".optionsExpandButton").toggle(function() {
$(this).animate({left: '+=425' });
$("#bottom").animate({left: '+=425' });
}, function() {
$(this).animate({left: '-=425' });
$("#bottom").animate({left: '-=425' });
});
});
-------------------------
|z索引：1 |编辑：
经过讨论，我意识到您需要幻灯片右/左解决方案。这就是解决方案，然后是一些更一般的建议
首先是HTML:
<div class="item">
<div id="top">
<img src="http://img814.imageshack.us/img814/8089/car1j.jpg" alt="..." />
</div>
<div id="bottom">
<img src="http://img178.imageshack.us/img178/3779/car2dy.jpg" alt=".." />
</div>
<div class="optionsExpandButton"></div>
</div>
$(function() {
$(".optionsExpandButton").toggle(function() {
$(this).animate({left: '+=425' });
$("#bottom").animate({left: '+=425' });
}, function() {
$(this).animate({left: '-=425' });
$("#bottom").animate({left: '-=425' });
});
});
现在，让我们使用.toggle（）
来向右滑动，而不是使用笨拙的if
语句：
JS:
<div class="item">
<div id="top">
<img src="http://img814.imageshack.us/img814/8089/car1j.jpg" alt="..." />
</div>
<div id="bottom">
<img src="http://img178.imageshack.us/img178/3779/car2dy.jpg" alt=".." />
</div>
<div class="optionsExpandButton"></div>
</div>
$(function() {
$(".optionsExpandButton").toggle(function() {
$(this).animate({left: '+=425' });
$("#bottom").animate({left: '+=425' });
}, function() {
$(this).animate({left: '-=425' });
$("#bottom").animate({left: '-=425' });
});
});
以下是旧答案：
我建议不要使用内联JS和内联CSS。将内容与功能和样式分开
您可能会发现，只列出所有div而不定位，然后使用jQuery定位所有div要容易得多。这也适用于您的z索引
看起来您希望显示一个图像，然后单击“向下滑动另一个图像”
我将向您展示一种非常简单的方法，不用担心CSS。如果用户禁用了JS，则该方法会很好地退化，因为两个图像在没有JS的情况下都是可见的，如果依赖于设置CSS z索引并将一个图像放置在另一个图像之上，则情况并非如此
首先，我将向您展示如何使用ID制作一个滑块，类似于您所做的。然后，我将向您展示如何使用类在一个页面上放置任意多个不同的图像滑块
一个带ID的滑块：
因此，首先，我将以一种没有JS的方式设置HTML。只是一个接一个的图像。我不会让JS或CSS内联。不要忘记您的alt
标记的可访问性
<div class="item">
<div id="top">
<img src="images/car1.jpg" alt="..." />
</div>
<div id="bottom">
<img src="images/car2.jpg" alt="..." />
</div>
<!-- Don't nest this button in either top or bottom! -->
<div id="expand">+ Expand</div>
</div>
许多具有类的滑块：
现在让我们以某种方式概括并使用div设置的类
HTML:
参考文献：
嗯。我知道有些时候，浏览器不喜欢负z索引。您也可以尝试给出容器div的z索引，有时这样做就可以了。。您希望图像彼此后面（这是您的代码为我所做的）还是彼此下面？如果您想要后者，绝对定位的div将使其无法工作，因为它们位于顶部：0左：0@Azmisov：我们以前尝试过z索引为0+和1+的情况，没有任何更改。通常，我们会用IE、Chrome和FireFox测试我们的代码，每个测试的结果都是一样的，所以我不认为这是浏览器的问题。我们也尝试过在没有任何运气的情况下为每个容器设置z索引。也许我们只是做错了。你能提供一个建议的例子吗？@tandu：我们希望图像像叠纸一样叠在一起。它现在这样做了，但不是以我们想要的方式。它还搞砸了我们的“optionsExpandButton”（出于任何原因，它位于其他图像的下方）。正如上面所解释的，我们需要更多的灵活性。什么是“你想要的方式？”很难区分它看起来是什么样子，或者你实际上想要的是什么样子，因为我看不出来。看起来没有什么特别不愉快的事情发生（不管你怎么说，对我来说没有危险信号…）@Peter Ajtai：好吧，它确实使optionsExpandButton与下图一致，但有些功能仍然需要更改。然而，我们正在寻找的主要问题尚未解决。如果您在计算机上使用虚拟图像测试此功能，请将位置设置为“相对”，以了解我的意思。@Justian-jsFiddle已关闭。到时候我会举个例子。如果您只想显示一个图像，那么使用jQuery而不是zIndex隐藏另一个图像。因为这是在JS滑块中，所以这是一个很好的选项。还可以查看jQuery.toggle（）
、.slideUp（）
、.slideDown（）
、和slideToggle（）
-得走了gl@Justian-我想我明白你的意思了。当按下按钮时，你希望第一个图像始终可见，第二个图像上下滑动，对吗？@Justian-你的CSS关闭了。“相对”是相对于默认位置定位的。绝对值应该是.item
==>------------而且，如果侧俯冲在#底部
内，我很难使用CSS，所以我只是把它放在外面。@Justian-这很棘手。项目相对定位，并在固定的父div内向左浮动
$(function() {
$("div.item div.bottom").hide();
$(".expand").click(function() {
var $this = $(this);
$this.prev().slideToggle();
$this.html() == "+ Expand" ?
$this.html("- Contract") :
$this.html("+ Expand");
});
});