我有三张图片堆叠在一起,另一张图片下面有一个jQuery幻灯片。我希望改变图像的不透明度,以便当您从左向右滑动时,图像将平滑地淡入/淡出,如下所示:
向左滑动。
img 1不透明度为100%
img 2 at 0
img 3在0
在中间滑动。
img 1在0
img 2 at 100
img 3在0
向右滑动
img 1在0
img 2 at 0
img 3在100%
我在http://jsfiddle.net/greggbanse/PWc6m/处设置了Fiddle,我知道代码是错误的,但是我可以使用一些指针来最好地执行此操作。 TIA。
$(function() {
$( "#slider" ).slider({
range: "min",
value: 0,
min: 0,
max: 100,
slide: function (event, ui) {
var r = (ui.value);
$("#img1,#txt1").css({'opacity':r/100});
$("#img2,#txt2").css({'opacity':1-(r/100)});
$("#img3,#txt3").css({'opacity':2-(r/100)});
}
})
});
的HTML
<img id="img1" src="http://www.norwich.edu/wp-content/uploads/home_oral_history.jpg" style="position:absolute;left:0;z-index:3000;">
<div id="txt1" style="position:absolute;left:0;z-index:3000;top:160px;background-color:#fff;">This is the text for the first image.</div>
<img id="img2" src="http://www.norwich.edu/wp-content/uploads/2013/12/condoleezza-rice.jpg" style="position:absolute;left:0;z-index:2000;">
<div id="txt2" style="position:absolute;left:0;z-index:2000;top:160px;background-color:#fff;">More text but this is the explanation text for the second image.</div>
<img id="img3" src="http://www.norwich.edu/wp-content/uploads/2014/05/CGCSresidency.jpg" style="position:absolute;left:0;z-index:1000;">
<div id="txt3" style="position:absolute;left:0;z-index:1000;top:160px;background-color:#fff;">And now we have yet more text for the third and final image.</div>
<div id="slider" style="height:10px; width:400px; position:relative;top:240px;"></div>
最佳答案
我对您的公式进行了一些调整:
$("#img1,#txt1").css({'opacity':1-(r*0.02)});
$("#img2,#txt2").css({'opacity':r*0.02+Math.floor((1-r*0.02))*(r-50)*0.04});
$("#img3,#txt3").css({'opacity':(r*0.02)-1});
这是demo。
据我了解,这是您试图实现的目标,但这对您有用吗?
关于jquery - 使用幻灯片在3张图像之间的过渡不透明度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24247963/