Question

是否有任何人安装了nivo slider到每一图像(aka Ken Burns effect ? 我 trying想执行,这 kind笑!

Answer 1

Actually, I got my implementation working!

我的职能范围很广。

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); });
}

而I m 开始将尼沃的屈从于此:

$( #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 );

我仍在解决一些安置问题。

Answer 2

Source &rel=“nofollow”>Demo

Add this to your 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();
}

友情链接