我想知道如何使 div 适合 slider 。我所说的 slider 是一个小盒子,当按下按钮时,一个窗口从侧面出现, float 而不是插入,当再次按下按钮时,它会缩回。我该怎么做呢?
我当前的代码列在这里:
<div class="rec-anime-list-container">
<ul class="rec-anime-list container">
<li>
<a href="#">
<div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
<div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
</li>
<li>
<a href="#">
<div class="column"><img src="http://dummyimage.com/120xTITLE80/000/fff" /></div></a>
<div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong></div>
</li>
<li>
<a href="#">
<div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
<div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
</li>
<li>
<a href="#">
<div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
<div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong></div>
</li>
<li>
<a href="#">
<div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
<div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
</li>
<li>
<a href="#">
<div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
<div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong></div>
</li>
</ul>
<style>
.rec-anime-list-container {
float:right;
text-decoration: none;
}
.rec-anime-list {
max-width: 480px;
}
.container li{
float:left;
width:230px;
margin-right:10px;
margin-bottom: 10px;
}
.column {
display:inline-block;
vertical-align:middle
}
.rec-anime-title {
margin-top:0;
color:gray;
width:100px;
}
.sub {
color:blue;
font-size:16px;
}
.dub {
color:red;
font-size:16px;
}
</style>
最佳答案
尝试使用 jQuery 并更改容器 div 样式-
$(document).ready(function() {
$('.rec-anime-list-container').click(function() {
if (parseInt($(this).css('right')) < 0) {
$(this).css('right', '5px');
} else {
$(this).css('right', '-350px');
}
});
});
.rec-anime-list-container {
position: absolute;
right: -350px;
text-decoration: none;
transition: right 300ms ease-in-out
}
.rec-anime-list {
max-width: 480px;
}
.container li{
float:left;
width:230px;
margin-right:10px;
margin-bottom: 10px;
}
.column {
display:inline-block;
vertical-align:middle
}
.rec-anime-title {
margin-top:0;
color:gray;
width:100px;
}
.sub {
color:blue;
font-size:16px;
}
.dub {
color:red;
font-size:16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="rec-anime-list-container">
<ul class="rec-anime-list container">
<li>
<a href="#">
<div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
<div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
</li>
<li>
<a href="#">
<div class="column"><img src="http://dummyimage.com/120xTITLE80/000/fff" /></div></a>
<div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong></div>
</li>
<li>
<a href="#">
<div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
<div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
</li>
<li>
<a href="#">
<div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
<div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong></div>
</li>
<li>
<a href="#">
<div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
<div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
</li>
<li>
<a href="#">
<div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
<div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong></div>
</li>
</ul>
</div>
关于javascript - 如何将 div 制作成 slider ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32664893/