Javascript 从滚动条中的div获取兄弟姐妹对
我有一个时间表,如果类不是活动的,我需要为从活动年移动的每一对更改css。事实就是这样Javascript 从滚动条中的div获取兄弟姐妹对,javascript,jquery,css,Javascript,Jquery,Css,我有一个时间表,如果类不是活动的,我需要为从活动年移动的每一对更改css。事实就是这样 ... n-4 n-3 n-2 n-1 n (active year) n+1 n+2 n+3 n+4 ... 这是我试过的,但这是索引 $frame.sly(`on`, `active`, function (event) { $(`.years.active`).css(`opacity`,`1`); $(`.years.active`).siblings().eq(1).css(`opacit
...
n-4
n-3
n-2
n-1
n (active year)
n+1
n+2
n+3
n+4
...
这是我试过的,但这是索引
$frame.sly(`on`, `active`, function (event) {
$(`.years.active`).css(`opacity`,`1`);
$(`.years.active`).siblings().eq(1).css(`opacity`,0.9`);
$(`.years.active`).siblings().eq(2).css(`opacity`,`0.8`);
$(`.years.active`).siblings().eq(3).css(`opacity`,`0.7`);
$(`.years.active`).siblings().eq(4).css(`opacity`,`0.6`);
}
HTML
<div class="pagespan container">
<div class="wrap">
<div class="frame" id="forcecentered">
<ul class="clearfix">
<li data-target="1997" class="years">1997</li>
<li data-target="2009" class="years">2009</li>
<li data-target="2010" class="years">2010</li>
<li data-target="2013" class="years active">2013</li>
<li data-target="2015" class="years">2015</li>
<li data-target="2016" class="years">2016</li>
<li data-target="2017" class="years">2017</li>
</ul>
</div>
</div>
</div>
- 1997年
2009年
- 2010年
- 2013年
- 2015年
- 2016年
2017年
任何人都知道这样做的方法。也许是数据目标?
我想达到这样的效果,从活动li开始的每一步字体和不透明度都会变小如果我理解正确,你想从活动li到最后降低li的不透明度。如果是这种情况,则代码段为:
var元素=$('.years.active').nextAll('.years').andSelf();
var步长=1/(1+元素长度);
var startValue=1;
元素。每个(函数(idx、ele){
起始值=起始值-0.1;
log('新的不透明度为(li:'+ele.textContent+'):'+startValue);
$(ele).css('opacity',startValue);
})
- 1997年
2009年
- 2010年
- 2013年
- 2015年
- 2016年
2017年
使用属性跟踪级别:
function moveForward() {
$(“.before”).each(function() {
$(this).attr(“data-pos”, $(this).attr(“data-pos”) + 1);
}
$(“.after”).each(function() {
$(this).attr(“data-pos”, $(this).attr(“data-pos”) - 1);
}
$(“.active”).toggleClass(“active before”).attr(“data-pos”, 1);
$(“.after[data-pos=‘0’]”).toggleClass(“after active”);
}
function moveBack() {
$(“.before”).each(function() {
$(this).attr(“data-pos”, $(this).attr(“data-pos”) - 1);
}
$(“.after”).each(function() {
$(this).attr(“data-pos”, $(this).attr(“data-pos”) + 1);
}
$(“.active”).toggleClass(“active after”).attr(“data-pos”, 1);
$(“.before[data-pos=‘0’]”).toggleClass(“before active”);
}
当然,您可以多次调用(或修改它们)以通过多个条目进行更改,并跟踪变量中的位置以允许“转到位置”函数
然后你的css:
/* any pos greater than 9 */
.before, .after {
opacity: 0;
}
/* these selectors should be sufficient because ‘.active’ will always have no ‘data-pos’ or will have a ‘data-pos’ of 0 */
[data-pos=‘1’] {
opacity: 0.9;
}
[data-pos=‘2’] {
opacity: 0.8;
}
/* values 3-9 here */
并确保您的html是预先正确设置的,例如
<div class=“before” data-pos=“2”/>
<div class=“before” data-pos=“1”/>
<div class=“active”/>
<div class=“after” data-pos=“1”/>
<div class=“after” data-pos=“2”/>
<div class=“after” data-pos=“3”/>
<div class=“after” data-pos=“4”/>
请显示HTML并更清楚地解释您希望做什么。我编辑了我的问题。。。还有CSS。。。所有相关代码。还有,请澄清你想做什么。我确实给出了相关代码。不再有了,所有的样式都是内联样式。只有当您滚动另一个类时,javascript才被指定为活动(它是sly插件)。我想重复这个过程,你有CSS类引用,而不是内联样式。那些课程在哪里?而且,你仍然没有编辑你的问题,以明确你想做什么。是的,像那样,但问题是我想从中间开始抱歉。。。我正在赶时间,到2013年中期(或4个元素)@ounnowno代码片段更新。你可以看到我从2013年开始。让我知道。就是这个,非常感谢