0

我在为 iPad 创建的网站中的幻灯片具有以下结构

<div id="slide4">
    <div class="slide4A1"></div>
    <div class="slide4A2"></div>
    <div class="slide4A3"></div>
</div>

每个块都包含通过媒体查询控制的背景图像，以允许它们填满屏幕，无论 Ipad 是纵向还是横向。

我需要为块设置动画，但希望位置如下 -

.slide4A1 - 固定左侧 .slide4A2 - 固定中心 .slide4A3 - 固定右侧

我试过左右浮动幻灯片 1 和 3 并以自动边距居中 - 但布局误入歧途 - 有什么想法吗？

js 小提琴在这里 - http://jsfiddle.net/chunk_pd/PAqSb/6/

4

3 回答 3

1

我相信这是您期望看到的：

CSS：

#slide4 {position: relative; }
.slide4A1, .slide4A3{ position:absolute; top: 0; }
.slide4A1{background:#000;  width:120px; height:1024px; left:-120px;}
.slide4A2{background:#367ab2; width:531px; height:1024px; margin-left:auto; margin-right:auto; position:relative!important; display: none;}
.slide4A3{background:#ff7e00; width:120px; height:1024px; right:-120px;}

JS：

function goDown3bPt2(){
                $('.slide4A1').animate({left:'0',}, 1600);
                $('.slide4A2').fadeIn('slow');
                $('.slide4A3').animate({right:'0',}, 2100);

        }

更新了 jsfiddle。

于 2013-01-17T11:55:38.657 回答
1

首先你必须清理你的 CSS - 组合position: absolute;并且float不会工作。使用您的包装器<div id="slide4">并将其定位设置为相对和width: 100%. 两个动画 div 都必须有position: absolute; top: 0px;才能到达包装器的顶部。

更重要的是 - 你的 JS 中有一个错字：

$('.slide4A1').animate({left:'0px;',}, 1600);只需删除；之后0px，瞧。

于 2013-01-17T12:14:43.890 回答
0

应用宽度：100%，边距：0 自动到 slide4 宽度：33 % 到 slide4A1，slide4A2，slide4A3

向左浮动到 slide4A1 和向右浮动到 slide4A3 类....！

于 2013-01-17T11:21:59.340 回答