肯伯恩斯效果与nivo滑块
Ken Burns effect with nivo slider
是否有人设置了nivo滑块来平移每个图像(又名Ken Burns效果)?我正试图实现它,这有点棘手!
实际上,我的实现工作了!
我有一个平移函数循环…像这样:
function ken_burns_loop(el) {
$(el)
.animate({
'background-position-x': '40%',
'background-position-y': '60%'
}, 8000, 'linear')
.animate({
'background-position-x': '30%',
'background-position-y': '40%'
}, 8000, 'linear')
.animate({
'background-position-x': '70%',
'background-position-y': '70%'
}, 8000, 'linear', function() { ken_burns_loop(el); });
}
我像这样初始化nivo slider
$('#welcome-slider').nivoSlider({
effect: 'fade',
slices: 1,
directionNav: false,
afterChange: function() {
$('#welcome-slider, .nivo-slice').stop(true);
ken_burns_loop('#welcome-slider, .nivo-slice');
}
});
ken_burns_loop('#welcome-slider, .nivo-slice');
我还在解决定位的一些问题。
来源&演示
添加到你的JS:
if(currentEffect === 'kenburns'){
createZoom(slider, settings, vars);
zoom = $('.nivo-zoom:last', slider);
var delta = (8 + Math.random() * 2) / 100;
var neww = zoom.width() * (1 + delta);
var newh = zoom.height() * (1 + delta);
var x = delta * zoom.width(); //Math.random()*(neww-zoom.width());
var y = delta * zoom.height(); //Math.random()*(newh-zoom.height());
var zoomdir = Math.round(Math.random() * 4);
zoom.animate({ opacity:'1.0'}, {easing:'linear',duration:settings.pauseTime*2/3});
if(zoomdir == 1) {
zoom.find('img').animate({ height:newh+'px',width:neww+'px',left: '-'+x+'px',top: '-'+y+'px'},{easing:'linear',duration:settings.pauseTime*4/3, complete: function(){ slider.trigger('nivo:animFinished'); }});
} else if(zoomdir == 2) {
zoom.find('img').animate({ height:newh+'px',width:neww+'px',right: '-'+x+'px',top: '-'+y+'px'}, {easing:'linear',duration:settings.pauseTime*4/3, complete: function(){ slider.trigger('nivo:animFinished'); }});
} else if(zoomdir == 3) {
zoom.find('img').animate({ height:newh+'px',width:neww+'px',right: '-'+x+'px',bottom: '-'+y+'px'}, {easing:'linear',duration:settings.pauseTime*4/3, complete: function(){ slider.trigger('nivo:animFinished'); }});
} else {
zoom.find('img').animate({ height:newh+'px',width:neww+'px',left: '-'+x+'px',bottom: '-'+y+'px'}, {easing:'linear',duration:settings.pauseTime*4/3, complete: function(){ slider.trigger('nivo:animFinished'); }});
}
if($('.nivo-zoom', slider).length > 2) $('.nivo-zoom:first', slider).remove();
}
相关文章:
- 带有 Nivo 滑块的自定义缩略图
- 如何根据上一个或下一个箭头为nivo滑块提供特定的过渡效果
- Nivo滑块在Chrome中不工作
- 如何以反向/从右到左的顺序显示阿拉伯语网站的Nivo滑块分页
- Nivo 滑块在 IE 中不起作用
- Nivo 滑块 URL 不会随图像而更改
- 我在WordPress中的Nivo滑块不显示箭头和导航栏
- Volusion 和 Nivo 滑块 - 无法让 Nivo 滑块主题正常工作
- 使图像成为 Nivo 滑块中的超链接
- Nivo滑块在第一页加载时不显示图像,但在刷新时加载
- nivo滑块和光滑的轮播无法协同工作的问题 - jquery
- RefineryCMS nivo 滑块不起作用需要 jquery
- Nivo滑块jQuery导致IE 8中出现混合内容错误
- JS:从当前图像中读取给定的SRC属性(nivo滑块)
- 预加载css背景图像,nivo滑块问题
- 调整主图像高度的Nivo滑块
- 用于自定义图像项目符号的Nivo滑块
- 在nivo滑块中定心图像
- Nivo滑块问题
- 如何居中显示的图像Nivo滑块