[英]CSS only paging with transition/transformation
Is there a way to implement something like this using CSS only (except for the button click handlers)? 有没有一种方法可以仅使用CSS来实现类似的功能(按钮单击处理程序除外)?
Consider a paging panel: 考虑一个分页面板:
<<
<
1
2
3
4
5
>
>>
<<
<
1
2
3
4
5
>
>>
When clicking the right >
Button, I want to slide the entries 1
to 5
to the left "behind" the <<
<
buttons and also 6
7
8
9
10
should slide in from the right (starting from "behind" the >
>>
buttons). 当点击右
>
按钮,我要的条目滑动1
至5
向左“后面” <<
<
按钮和也6
7
8
9
10
应该从右侧滑入(从“后面”开始>
>>
纽扣)。
The result then should be <<
<
6
7
8
9
10
>
>>
结果应为
<<
<
6
7
8
9
10
>
>>
Same should work in the other direction. 同样应该在另一个方向上工作。
The solution is to layout the page-links in one horizontal line. 解决方案是将页面链接布置在一条水平线上。 One way to achieve this is to put them in a list, set
display:inline
on the <li>
s and white-space:nowrap
on the <ul>
. 实现这一目标的一个方法是把它们放在一个列表中,设置
display:inline
的<li>
S和white-space:nowrap
在<ul>
Next you have to make sure that all but the first 5 links are hidden. 接下来,您必须确保除前5个链接之外的所有链接都是隐藏的。 This can be achieved by setting a fixed
width
in conjunction with text-overflow:clip
and overflow:hidden
. 这可以通过将固定
width
与text-overflow:clip
和overflow:hidden
结合使用来实现。 I have to admit, I eyeballed the value for the width. 我必须承认,我盯着宽度的值。
The scrolling effect can be achieved by setting some attribute via javascript and in CSS use transform: translateX()
and transition: translateX
if the attribute has been set. 滚动效果可以通过使用javascript设置一些属性来实现,并且在CSS中使用
transform: translateX()
和transition: translateX
如果已设置该属性)。
Tested only with Chrome, I don't give any promise this code will work with any other browser 仅通过Chrome进行了测试,我不能保证此代码可与其他任何浏览器一起使用
var pages = document.getElementById("pages") var scroll = Number(pages.dataset.scroll); function scrollLeft() { scroll += 1; pages.dataset.scroll = scroll; } function scrollRight() { scroll -= 1; pages.dataset.scroll = scroll; }
.pager a { display: inline-block; background-color: #aaa; color: #fff; width: 2em; text-align: center; padding: .5em 0; text-decoration: none; margin: 0 .25em; } .pager ul { list-style-type: none; margin: 0; padding: 0; float: left; } .pager ul li { display: inline; } #pages { width: 13.75em; white-space: nowrap; overflow: hidden; text-overflow: clip; float: left; } #pages ul { transition: transform .5s ease; } #pages[data-scroll='1'] ul { transform: translateX(-13.75em); }
<div class="pager"> <ul class="prev-links"> <li><a href="#"><<</a></li> <li><a href="javascript:scrollRight();"><</a></li> </ul> <div id="pages" data-scroll="0"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> </ul> </div> <ul class="next-links"> <li><a href="javascript:scrollLeft();">></a></li> <li><a href="#">>></a></li> </ul> </div>
This code does not check any bounds. 此代码不检查任何界限。 So each click on
<
or >
will change the variable scroll
whether it makes sense or not. 因此,每次单击
<
或>
都将更改变量scroll
是否有意义。
For each step, you will have to include a new directive, so if you have 3 steps (ie more than 10 pages), you will have to add 对于每一步,您都必须包含一个新指令,因此,如果您有3个步骤(即,超过10页),则必须添加
#pages[data-scroll='2'] ul {
transform: translateX(-27.5em);
}
and so on. 等等。
The links for <<
and >>
don't work, especially the latter is going to be a bit tricky (and might be impossible, if you don't know in advance, how many pages there are. <<
和>>
的链接不起作用,特别是后者将变得有些棘手(并且可能无法实现,如果您事先不知道该页面有多少页。
In general, to get this fully working, there will be a lot of hardcoding stuff. 通常,要使此功能完全起作用,将有很多硬编码内容。
As requested, this is the solution with the least JS I could think of, but to be honest, if you're using JS for the click-handlers anyway (and you have to because this can't be done without it), it would be way better to implement a few calculation and sanity-checks in javascript instead of looking for an almost-CSS-only solution. 根据要求,这是我能想到的使用最少JS的解决方案,但老实说,如果您仍然将JS用于点击处理程序(并且必须这样做,因为没有它就无法完成),它最好在javascript中实现一些计算和完整性检查,而不是寻找几乎仅CSS的解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.