0
我正在使用JavaScript創建幻燈片。我使用JS定位控件(下一個和上一個按鈕)。從JavaScript計算向CSS規則添加數字
的HTML中,當按鈕被經由JS加入,看起來像這樣:
<div id="slideshow">
<figure>
<img src="https://c4.staticflickr.com/8/7495/16322256485_08ee0ee36f_z.jpg">
<figcaption>This is an example of a really long caption. Here I go. Do I wrap to a second line? Wrap wrap wrap wrap. Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap</figcaption>
</figure>
<figure class="hide">
<img src="https://c1.staticflickr.com/9/8584/16136057529_e7b64928d0_z.jpg">
<figcaption>Insert caption</figcaption>
</figure>
<figure class="hide">
<img src="https://c2.staticflickr.com/8/7474/16120961661_8dc12962dd_z.jpg">
<figcaption>Insert caption</figcaption>
</figure>
<span id="next"><p>>></p></span>
<span id="previous"><p><<</p></span>
</div>
<!-- end slideshow -->
滑動由與圖像和字幕的圖形元素的。
我希望控件(兩個跨度)垂直放置在圖像的中間(不考慮標題的高度,這可能會有所不同)。
跨徑定位是這樣的:
#previous,#next {
height:0;
padding-bottom:65.9%;
/* Calculate this with JS so can adjust based on img height */
position:absolute;
top:0
}
#previous p,#next p {
margin:0;
display:table;
position:absolute;
/* positioned in relation to the #previous and #next spans */
top:50%;
-moz-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
-o-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%)
}
#previous p {
left:0;
border-radius:0 5px 5px 0;
}
#next p {
right:0; /*moves button to right corner of span instead of left */
border-radius:5px 0 0 5px;
}
#previous {
left: 0;
}
#next {
right: 0;
}
的#previous和#next跨度具有填充底部,它延伸到圖像的高度只(不包括字幕),然後將按鈕的實際文字與跨度有關。
我需要根據圖像高度計算填充底部。但通過不同的幻燈片使用,圖像高度可能會發生變化。另一個幻燈片可能會使用不同尺寸的圖像。
所以我想JavaScript來計算這個填充並將其插入到樣式表中。我有JS的計算:
// Calculate position of buttons
var getImage = photos[0].firstElementChild;
var imageHeight = (getImage.height);
var imageWidth = (getImage.width);
var paddingTop = (imageHeight/imageWidth) * 100;
paddingTop = +paddingTop.toFixed(2);
var percent = paddingTop + "%";
我只是無法弄清楚如何百分比變量添加到樣式表,規則是:
#previous,#next {
padding-bottom:[insert % from JS];
}
這裏是我的jsfiddle:http://jsfiddle.net/amykirst/17rbku86/
提示:給內部元素「display:table-cell」和「vertical-align:middle」。它可能會解決你的問題。 – melancia
或者您可以使用php,如下所示: http://stackoverflow.com/questions/476276/using-javascript-in-css – Anna
https://developer.mozilla.org/en-US/docs/Web/ API/CSS_Object_Model/Using_dynamic_styling_information您可以使用CSSOM在CSS樣式表中插入CSS規則。 – Xufox