0
我有一個自定義下拉框mootools滑塊根據下面的圖片。此滑塊包含三個div，即自動垂直一個一個地旋轉。滑塊和自定義下拉列表的javascript和css如下所述。我的問題是，當我把下拉到按照下面的圖像隱藏在滑塊div後面的滑塊div中。根據要求，我無法更改下拉位置，也不會增加滑塊高度，那麼如何在頂部滑動條上顯示下拉列表項。任何建議將不勝感激。現在下拉隱藏背後的mootools silder
你可以看到上面的影像單位成本下拉列表中躲在後面滑塊容器。
滑塊mootools
http://mootools.net/download/get/mootools-1.2.4.js
http://cnetjavascript.googlecode.com/files/mootools.svn.js
<script type="text/javascript">
var _lofmain = $('lofslidecontent45');
var _lofscmain = _lofmain.getElement('.lof-main-wapper');
var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator');
var object = new LofFlashContent(_lofscmain,
_lofnavigator,
_lofmain.getElement('.lof-navigator-outer'),
{ fxObject: { transition: Fx.Transitions.Quad.easeInOut, duration: 800 },
interval: 3000,
direction: 'vrdown'
});
object.start(true, _lofmain.getElement('.preload'));
var isCustom = "@(ViewBag.IsCustom)";
if (isCustom == "True") {
object.callMyEvent(2, true); // call my custom event
object.setNavActive(2);
}
滑塊CSS
/* CSS Document */
.lof-slidecontent
{
margin-left: 0px;
position: relative;
overflow: hidden;
width: 1200px;
height: 486px;
}
.lof-slidecontent .preload
{
height: 100%;
width: 100%;
background: #FFF;
position: absolute;
top: 0;
left: 0;
z-index: 10;
color: #FFF;
text-align: center;
}
.lof-slidecontent .preload div
{
height: 100%;
width: 100%; /*background: transparent url(../Images/MyImages/Icons/load-indicator.gif) no-repeat scroll 50% 50%;*/
}
/* main flash */
.lof-main-wapper
{
margin-right: auto;
overflow: hidden; /*background: transparent url(../Images/MyImages/Icons/load-indicator.gif) no-repeat scroll 50% 50%;*/
padding: 0px;
height: 488px;
width: 1014px;
position: relative;
overflow: hidden;
}
.lof-main-wapper .lof-main-item
{
padding: 0px;
margin: 0px;
height: 488px;
width: 100%;
position: absolute;
}
.lof-main-wapper .lof-main-item img
{
padding: 0px;
width: 100%;
}
.lof-main-item-desc
{
z-index: 100px;
position: absolute;
top: 150px;
left: 50px;
width: 400px;
background: url(../images/transparent_bg.png); /* filter:0.7(opacity:60) */
}
.lof-main-item-desc p
{
color: #FFF;
margin: 0 8px;
padding: 8px 0;
}
.lof-main-item-desc h3 a
{
color: #FFF;
margin: 0;
font-size: 140%;
padding: 20px 8px 2px;
font-family: "Trebuchet MS" ,Trebuchet,Arial,Verdana,sans-serif;
}
/* item navigator */
ul.lof-navigator
{
top: 0px;
padding: 0px;
margin: 0px;
position: absolute;
width: 100%;
overflow: hidden;
}
ul.lof-navigator li
{
cursor: hand;
cursor: pointer;
list-style: none;
width: 100%;
padding: 0px;
margin: 0px;
}
.lof-navigator-outer
{
position: absolute;
right: 0;
top: 0px;
z-index: 100;
height: 488px;
width: 204px;
padding: 0px;
margin: 0px;
float: left;
}
.lof-navigator li.active
{
background: url(../../Images/MyImages/Icons/arrow-bg2.png) no-repeat;
background-color: #d21c1c;
color: #FFF;
}
.lof-navigator li:hover
{
}
.lof-navigator li div
{
text-align: center;
height: 162px;
position: relative;
margin-left: 0px;
padding-left: 0px;
background-color: #FFFFFF;
}
.lof-navigator li.active div
{
}
.lof-next
{
position: absolute;
top: 0;
height: 30px;
background: #F9F9F9;
display: block;
width: 100%;
}
.lof-previous
{
position: absolute;
bottom: 0;
height: 30px;
background: #F9F9F9;
display: block;
width: 100%;
}
.lof-navigator-MycontentHeader
{
font-family: Caecilia LT Std;
font-size: 26px;
color: #d21c1c;
}
li.active .lof-navigator-MycontentHeader
{
color: #FFF;
}
.lof-navigator-MycontentFooter
{
font-family: TradeGothic, Arial;
font-style: oblique;
font-size: 13px;
color: Black;
}
li.active .lof-navigator-MycontentFooter
{
color: #FFF;
}
降下來
提前感謝！
'的z-index：100px'？ – elclanrs 2013-03-16 08:22:25
我還給了z-index：100px ...但它不起作用。 – 2013-03-16 09:04:00
@ user1273915您是否嘗試將滑塊z-index設置爲負值 – btevfik 2013-03-16 09:36:17