我有一系列3张图片,我把它放到一个无序的列表中。图像几乎相同,只有一小部分图像在变化。这样我就得到了一部电影'有点效果。
我遇到了一个问题,我似乎无法弄清楚如何将过渡设置为如此平滑,将图像融合到另一个中。现在一个图像淡出而另一个图像淡入...这导致图像之间闪烁......
任何人都可以分享几乎相同图像的平滑混合示例吗?
答案 0 :(得分:1)
更新
我已经将转换修改为几乎没有明显淡出,所以看起来每个幻灯片都应该淡入。你可能需要更改速度,延迟和/或超时属性以完全匹配你的 试图完成。
http://jsfiddle.net/lucuma/tcRCj/12/
过渡:
$.fn.cycle.transitions.smooth = function($cont, $slides, opts) {
$slides.not(':eq(' + opts.currSlide + ')').css('opacity', .99);
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr, next, opts);
opts.cssBefore.opacity = 0;
});
opts.animIn = {
opacity: 1
};
opts.animOut = {
opacity: .99
};
opts.cssBefore = {
top: 0,
left: 0
};
};
原件:
最接近超平滑过渡的是:
$('#slideshow').cycle({fx:'fade', continuous:1, timeout:0, easeIn: 'linear', easeOut: 'linear'});
演示:http://jsfiddle.net/lucuma/tcRCj/6/
这也适用于水平/垂直fx。
第2轮:
我已经将jsfiddle更新为一个名为smooth的新自定义fx:
http://jsfiddle.net/lucuma/tcRCj/12/
您可能需要使用速度:
$.fn.cycle.transitions.smooth = function($cont, $slides, opts) {
$slides.not(':eq(' + opts.currSlide + ')').css('opacity', .99);
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr, next, opts);
opts.cssBefore.opacity = 0;
});
opts.animIn = {
opacity: 1
};
opts.animOut = {
opacity: .99
};
opts.cssBefore = {
top: 0,
left: 0
};
};
$('#slideshow').cycle({
fx: 'smooth',
continuous: 1,
speed: 300,
easeIn: 'linear',
easeOut: 'linear'
});