0

我一直在玩我的代码，我已经设置了日历来做我想做的事，现在我只是想让<p>和 iframe 很好地排列在一起，到目前为止我有这个代码jsfiddle，这里是现在箭头和 iframe 的分离示例

我想要达到的目标：

200px----[arrowLEFT]---30px---[iframe]---30px---[arrowRIGHT]

HTML：

<div id="miniFeed">


<p id="toggle">
<span> <a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('LeftArrow','','WEBgraphics/arrowLeftROLL.png',1)">
<img src="WEBgraphics/arrowLeft.png" width="40" height="400" id="LeftArrow"></a></span>
<span> </span>
</p>



<div id="calender">


<div id="left"> <iframe src="calenderAPRIL.html" width="350px" height="400px"></iframe>   
</div>

<div id="right"> <iframe src="calenderMAY.html" width="350px" height="400px"></iframe>   
</div>


</div>

<p id="toggle">

<span> </span>

<span> <a href="#" onMouseOut="MM_swapImgRestore()"  
onMouseOver="MM_swapImage('RightArrow','','WEBgraphics/arrowrightROLL.png',1)">
<img src="WEBgraphics/arrowright.png" width="40" height="400" id="RightArrow"></a></span>   
</p>



</div>

JAVASCRIPT：

window.onload=function() {
$('#toggle > span').click(function() {
var ix = $(this).index();

$('#left').toggle( ix === 0 );
$('#right').toggle( ix === 1 );
});
};

CSS：

#miniFeed {
}
#right { display:none; }
#LeftArrow {
z-index: 100;
width: auto;
float: left;
margin-left: 200px;
display: block;
}
#calender {
float: left;
z-index: -1;
}
4

1 回答 1

0

尝试这个

html:

<div id="miniFeed">
<div class="arrow leftArrow">        
</div>
<div class="calendars">
     <div class="carousel">
        <div class="calendar-1">                        
        </div>
        <div class="calendar-2">            
        </div>        
    </div>
</div>
<div class="arrow rightArrow">        
</div>

CSS：

#miniFeed {
    width: 400px;
    height: 250px;    
}

#miniFeed > div {
    float: left;    
     height: 100%;
}

.arrow {    

    width: 100px;
    background: blue;
}

.calendars {
  width: 200px;
  overflow: hidden; /*the magic*/
}

.carousel {
    width: 400px; /* the size is number of calendars * the width per calendar */
    height: 100%;    
}

.carousel > div {    
    width: 200px;
    height: 100%;
    float: left;
}

.calendar-1 {
  background: red;   
}

.calendar-2 {
  background: green;   
}

js：

$('.leftArrow').click(function() {
    //we move the carousel negative
    //the value 200 is the width of a calendar
    $('.carousel').animate({marginLeft: -200}, 300);
});

$('.rightArrow').click(function() {
    //we move the carousel negative
    $('.carousel').animate({marginLeft: 0}, 300);
});

我们创建了一个隐藏溢出的包装器，所以在它里面我们有我们的日历集合。

结果：http: //jsfiddle.net/renanvalentin/kzTRz/

于 2013-04-02T14:42:55.607 回答