尝试单击此处的其中一个缩略图:http://henrybuilt.com/questions/
在计算机上它可以按预期工作(文本覆盖显示在幻灯片集中第一张图像的顶部，然后在单击下一张或上一张时消失)。在 iPad 或 iPhone 上的 safari 和 chrome 中，文本覆盖会出现一秒钟，然后在加载后被我的背景图像幻灯片 div 覆盖，我无法使我的覆盖 (.slide_view .title) 出现在背景 div 的顶部。
具体的css:
.slide_view .title{
display: none;
position: absolute;
top:0;
left:0;
background-color: white;
width: 100%;
height: 100%;
z-index: -3
}
#backstretch{
z-index: -3;
}
完整文档:
<?php
$slides = array(
array("Why talk with us", "whytalk", 6),
array("Who we are", "who", 1),
array("Notable projects", "notable", 0),
array("Products", "products", 0),
array("Unique options", "unique", 11),
array("Kitchens", "kitchens", 0),
array("Whole House", "whole", 0),
array("Furniture", "furniture", 4),
array("Opencase", "opencase", 0),
array("What is a system", "system", 5),
array("HB vs Custom", "vscustom", 0),
array("HB vs Euro system", "vseuro", 0),
array("Design Process", "design", 0),
array("Making it", "making", 0),
array("Installation", "installation", 0),
array("Pricing", "pricing", 0),
array("Materials", "materials", 0),
array("High functions", "highfunctions", 0),
array("Craft quality", "craft", 0),
array("Press kit", "press", 0),
array("Working remotely", "working", 0),
array("Client site", "client", 0)
);
?>
<!DOCTYPE html>
<html>
<head>
<style>
body{
margin: 0;
padding: 0;
color: #000;
font-size: 62.5%;
}
body, input, textarea, select{
font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.wrapper{
max-width: 1000px;
margin: auto;
padding: 2%;
}
.header{
font-size: 3em;
margin-bottom: 2%;
padding: 2% 0%;
}
.thumb_wrapper{
float: left;
width: 17%;
margin-right: 3%;
margin-bottom: 2%;
}
.thumb_wrapper:hover{
cursor: pointer;
opacity: 0.5;
}
.thumb_wrapper img{
width: 100%;
margin-bottom: 1%;
}
.thumb_wrapper .caption{
text-transform: uppercase;
opacity: 0.8;
font-size: 1em;
margin: 2% 2%;
}
.slide_view{
display: none;
}
.slide_view .nav_bar{
width: 100%;
height: 10%;
background-color: rgba(0, 0, 0, 1);
position: absolute;
bottom: 0;
left: 0;
}
.slide_view .title{
display: none;
position: absolute;
top:0;
left:0;
background-color: white;
width: 100%;
height: 100%;
z-index: -3
}
.slide_view .text{
position: absolute;
top:50%;
margin-top: -1em;
font-size: 4em;
color: black;
width: 100%;
text-align: center;
text-transform: uppercase;
}
#backstretch{
z-index: -3;
}
.caption{
}
.controls{
float: right;
margin-right: 3%;
display: block;
height: 100%;
width: 20%;
}
.prev, .next {
height: 8%;
padding: 10px;
border-radius: 5px;
background: rgba(0,0,0,.5);
position: absolute;
top: 50%;
margin-top: -50px;
cursor: pointer;
z-index: 3;
}
.prev:hover, .next:hover, .back:hover {
opacity: 0.5;
cursor: pointer;
}
.next{
right: 5%;
}
.prev{
left: 5%;
}
.back{
float: left;
display: block;
height: 100%;
}
.back img{
height: 90%;
margin-top: 5%;
margin-left: 50%;
margin-right: 50%;
display: block;
}
.overlay{
display: none;
position: absolute;
top:0;
left:0;
background-color: black;
width: 100%;
height: 100%;
}
.image_caption{
text-transform: uppercase;
margin-left: 10%;
padding-top: 1%;
float: left;
font-size: 1em;
color: #fff;
}
.relative{
width: 100%;
height: 100%;
position: relative;
}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
var showing_title = false;
var showing_title_for_first_time = false;
var slides = [
<?php
foreach($slides as $slide){
echo "
['".$slide[0]."', '".$slide[1]."', ".$slide[2]."],";
}
?>
["", "", 0]
];
var current_group;
var current_index;
var transition_length = 500; //in ms
$(document).ready(function(){
var image_width = $(".thumb_wrapper .image_wrapper").width();
$(".thumb_wrapper .image_wrapper").height(image_width*.75);
$(".thumb_wrapper").click(function(){
var t = this;
var group = $(t).attr("group");
slideView();
var prefix = slides[group][1];
var index = 0;
current_group = group;
current_index = index;
setSlide(prefix, index);
showing_title = true;
showTitleForGroup(group);
});
$(".next").click(function(){
next();
});
$(".prev").click(function(){
prev();
});
$(".exit").click(function(){
thumbView();
});
});
function slideView(){
setTimeout(function(){
$(".thumb_view").hide();
$(".slide_view").show();
}, transition_length);
showing_title_for_first_time = true;
}
function thumbView(){
setTimeout(function(){
$.backstretch("destroy");
$(".slide_view").hide();
$(".thumb_view").show();
}, transition_length);
transition();
}
function showTitleForGroup(group){
showing_title = true;
transition();
setTimeout(function(){
$(".title").show();
$(".title .text").html(slides[group][0]);
}, transition_length);
}
function hideTitle(){
showing_title = false;
transition();
setTimeout(function(){
$(".slide_view .title").hide();
}, transition_length);
}
function transition(){
$(".overlay").fadeIn(transition_length, function(){
$(".overlay").fadeOut(transition_length);
});
}
function setSlide(prefix, index){
transition();
setTimeout(function(){
$.backstretch("images/"+prefix+"_"+index+".jpg");
if(showing_title){
$("#backstretch").zIndex(-3);
}
}, transition_length);
}
function next(){
if(showing_title){
hideTitle();
}else{
var group_size = slides[current_group][2];
var groups = slides.length;
var index = current_index + 1;
var group = current_group;
if(index >= group_size){
index = 0;
group = parseInt(current_group) + 1;
if(slides[group][0] == ""){
group = 0;
}
showTitleForGroup(group);
}
var prefix = slides[group][1];
current_index = index;
current_group = group;
setSlide(prefix, index);
}
}
function prev(){
if(showing_title && !showing_title_for_first_time){
hideTitle();
}else{
var index = current_index - 1;
var group = current_group;
if(current_index == 0){
group = current_group - 1;
if(group == -1){
group = slides.length - 2;
}
index = slides[group][2] - 1;
if(!showing_title_for_first_time){
showTitleForGroup(current_group);
}
}
if(showing_title_for_first_time){
hideTitle();
showing_title_for_first_time = false;
}
var prefix = slides[group][1];
current_index = index;
current_group = group;
setSlide(prefix, index);
}
}
</script>
</head>
<body>
<div class="wrapper">
<div class="thumb_view">
<div class="header">
henrybuilt
</div>
<div class="content">
<?php
$i = 0;
foreach($slides as $slide){
?>
<div class="thumb_wrapper" group="<?php echo $i; ?>">
<div class="image_wrapper">
<img src="images/<?php echo $slide[1]; ?>_0.jpg" />
</div>
<div class="caption">
<?php echo $slide[0]; ?>
</div>
</div>
<?php
$i++;
}
?>
<div style="clear:both"></div>
</div>
<div class="footer">
</div>
</div>
<div class="slide_view">
<div class="nav_bar">
<div class="relative">
<div class="back">
<img class="exit" src="images/exit.png"/>
</div>
<div class="image_caption">
</div>
</div>
</div>
<img class="next" src="images/next.png"/>
<img class="prev" src="images/prev.png"/>
<div class="title">
<div class="text">
some text
</div>
</div>
</div>
</div>
<div class="overlay">
</div>
<div style="display:none">
<?php
foreach($slides as $slide){
for($i = 0; $i < $slide[2]; $i++){
echo '
<img src="images/'.$slide[1].'_'.$i.'.jpg"/>';
}
}
?>
</div>
</body>
</html>
最佳答案
请更新以下 CSS 代码:
.prev, .next{z-index:999999}
.slide_view .title{z-index:999}
.slide_view .text{z-index:9999}
关于javascript - 忽略 z-index 的移动 safari，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26010685/