[英]CSS affected by Javascript for EasySlider 1.7
我正在嘗試使用EasySlider 1.7獲得一個很好的疊加效果。 這不僅包括圖像,還包括代表圖像的文本。 現在我無法在我需要的頁面上排列文本。
http://intranet.streamflame.com
這是主頁,您在主滾動圖像上看到黑色疊加層的部分是文本應該放置的位置。 現在,如果我擺脫滾動文本的代碼,文本就會停留在應該的位置。 但是,只要我添加腳本同時滾動文本,它似乎會使文本消失。
這是我的代碼。
HTML:
<div class="filler">
<div class="filler-picture">
<div class="filler-img">
<ul>{% for project in rotations %}
<li><img src="{% thumbnail project.key_image.get_absolute_url 559x361 crop,upscale %}" width="559" height="361" alt="{{ project.title }}" /></li>
{% endfor %}
</ul>
</div>
<div class="filler-mask">
<img src="{{ MEDIA_URL }}img/filler.png" alt="filler" />
</div>
<div class="filler-text">
<ul>
<li>
<span class="filler-text-left">WaterTiger</span>
<span class="filler-text-right">Project watertiger is a test project whilst we get all the site together, call it a filler if you must, there is no project watertiger your only dreaming.</span>
</li>
<li>
<span class="filler-text-left">Dragonfly</span>
<span class="filler-text-right">Project Dragonfly is a test project whilst we get all the site together, call it a filler if you must, there is no project dragonfly your only dreaming.</span>
</li>
<li>
<span class="filler-text-left">Spacemunch</span>
<span class="filler-text-right">Project Spacemunch is a test project whilst we get all the site together, call it a filler if you must, there is no project Spacemunch your only dreaming.</span>
</li>
</ul>
CSS:
.filler {
position: relative;
margin-left:20px;
height:361px;
width:559px;
float:left;
}
.filler-mask {
position: absolute;
left:0; top:0;
height:361px;
width:559px;
z-index: 100;
}
.filler-img{
position: absolute;
left:0; top:0;
height:361px;
width:559px;
z-index: 50;
}
.filler-text {
width: 558px;
height: 68px;
position: absolute;
z-index: 200;
color: #fff;
}
.filler-text li {
list-style-type: none;
z-index: 1000;
}
.filler-text-left {
width: 169px;
float: left;
height: 48px;
padding: 10px;
font-size: 18pt;
font-weight: 100;
}
.filler-text-right {
width: 340px;
float: right;
height: 48px;
padding: 10px;
font-size: 10pt;
}
EasySlider Javascript:
<script type="text/javascript">
$(document).ready(function(){
$(".filler-text").easySlider({
auto: true,
continuous: true,
speed: 1800,
pause: 5000,
nextId: "next2",
prevId: "prev2"
});
$(".filler-img").easySlider({
auto: true,
continuous: true,
speed: 1800,
pause: 5000,
nextId: "next2",
prevId: "prev2"
});
});
</script>
注意:我已經嘗試將文本的腳本放在圖像的腳本下,這看起來沒有變化。
希望有人可以提供幫助。
將滑塊效果添加到填充文本會通過jquery將其屬性設置為
這是你的填充文本里面的li沒有達到它的高度的結果。 所以第一個解決方案是通過在預先模式或簡單中添加clearfix來使li達到其高度:
<div style="clear: both;"></div>
每次之后
<span class="filler-text-left">WaterTiger</span>
<span class="filler-text-right">Project watertiger is a test project whilst we get all the site together, call it a filler if you must, there is no project watertiger your only dreaming.</span>
所以它看起來像:
<span class="filler-text-left">WaterTiger</span>
<span class="filler-text-right">Project watertiger is a test project whilst we get all the site together, call it a filler if you must, there is no project watertiger your only dreaming.</span>
<div style="clear: both;"></div>
最后管理填充文本的頂部位置
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.