中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

執(zhí)行特效

三個(gè)核心類的最后一個(gè)是 Ken Burns Effects。這些特效通過(guò) Animation 對(duì)象應(yīng)用于圖像，如 清單 6 所示。

清單 6. KenBurnsAnimations.js

function KenBurnsFader( img, windowSize )
{
  this.img = img;
  this.windowSize = windowSize;
}

KenBurnsFader.prototype.apply = function( percent )
{
  var opacity = 100;

  if ( percent <= this.windowSize )
    opacity = ( percent / this.windowSize ) * 100;
  else if ( percent >= ( 100 - this.windowSize ) )
    opacity = ( ( 100 - percent ) / this.windowSize ) * 100;

  this.img.set_opacity( opacity );
}

function KenBurnsZoomer( img, start, end, cw, ch )
{
  this.start = start;
  this.end = end;
  this.img = img;

  var wr = this.img.width / cw;
  var nw = this.img.width * wr;
  var nh = this.img.height * wr;

  this.sw = ( nw * ( this.start / 100 ) );
  this.ew = ( nw * ( this.end / 100 ) );
  this.sh = ( nh * ( this.start / 100 ) );
  this.eh = ( nh * ( this.end / 100 ) );
  this.dw = ( this.ew - this.sw ) / 100;
  this.dh = ( this.eh - this.sh ) / 100;
}

KenBurnsZoomer.prototype.apply = function( percent )
{
  this.img.set_size(
    this.sw + ( this.dw * percent ),
    this.sh + ( this.dh * percent ) );
}

function KenBurnsMover( img, sx, sy, ex, ey, cw, ch )
{
  this.img = img;
  this.sx = sx / 100;
  this.ex = ex / 100;
  this.sy = sy / 100;
  this.ey = ey / 100;
  this.cw = cw;
  this.ch = ch;
  this.wr = this.img.width / this.cw;
}

KenBurnsMover.prototype.apply = function( percent )
{
  var nw = this.img.current_width * this.wr;
  var nh = this.img.current_height * this.wr;

  var cntw = ( ( this.cw / 2 ) - ( nw / 2 ) );
  var cnth = ( ( this.ch / 2 ) - ( nh / 2 ) );

  var sx = ( nw * this.sx );
  var ex = ( nw * this.ex );
  var sy = ( nh * this.sy );
  var ey = ( nh * this.ey );
  var dx = ( ex - sx ) / 100;
  var dy = ( ey - sy ) / 100;
  var x = cntw + sx + ( dx * percent );
  var y = cntw + sy + ( dy * percent );

  this.img.set_position( x, y );
}

這三個(gè)類分別處理應(yīng)用于圖像的不同特效。KenBurnsFader 類使用不透明度處理圖像的淡入淡出。KenBurnsZoomer 類處理圖像的縮放，從最初的大小到最終的大小。KenBurnsMover 類處理圖像的移動(dòng)，從起點(diǎn)到終點(diǎn)（用圖像的百分比指定）。

經(jīng)過(guò)一些試驗(yàn)后，我發(fā)現(xiàn)最吸引人的移動(dòng)特效是相對(duì)于窗口中心從一個(gè)角移動(dòng)到另一個(gè)角。KenBurnsMover 類的 apply 方法包含一些復(fù)雜的數(shù)學(xué)運(yùn)算，不僅相對(duì)于包含圖像的 <div> 標(biāo)記的中心來(lái)移動(dòng)，還要計(jì)算圖像和 <div> 標(biāo)記的相對(duì)大小，這樣在小窗口中移動(dòng)的距離就小，在大窗口中移動(dòng)的距離就大。放大倍數(shù)根據(jù)窗口的高度確定。

出處：IBM developerWorks
責(zé)任編輯：moby

上一頁(yè) 用DHTML與XML制作Ajax幻燈片 [4] 下一頁(yè) 用DHTML與XML制作Ajax幻燈片 [6]

◎進(jìn)入論壇網(wǎng)絡(luò)編程版塊參加討論