1. 程式人生 > >HTML編程之利用jquery制作長圖動畫的方法

HTML編程之利用jquery制作長圖動畫的方法

mouse -- 實現 存在 動畫 編程開發 ++ 利用 都是

在網站前端編程開發中,我們經常會遇到需要將圖片設置為背景圖,當鼠標移入時利用setTimeout定時器去控制改變background-position使得圖片逐幀向上移動,鼠標移除則控制向下移動,但要註意在鼠標移入和移出時要相互關閉定時器。具體如何來實現呢?下面就來為各位分析解答一下吧。

  var positionC=[‘0‘,‘-75‘,‘-150‘,‘-225‘,‘-300‘,‘-375‘,‘-450‘,‘-525‘,‘-600‘,‘-675‘,‘-750‘,‘-825‘,‘-900‘,‘-975‘,‘-1050‘,‘-1125‘,‘-1200‘,‘-1275‘,‘-1350‘,‘-1425‘,‘-1500‘,‘-1575‘,‘-1650‘,"-1800"];

  // var positionC=[‘0‘,‘-180‘,‘-360‘,‘-540‘,‘-720‘,‘-900‘,‘-1080‘,‘-1260‘,‘-1440‘,‘-1620‘,‘-1500‘,‘-1650‘,"-1800",];

  var iconC=0;

  var t1;

  var i1;

  $(".bgk1").mousemove(function () {

  clearTimeout(i1);

  iconABC();

  })

  $(".bgk1").mouseout(function () {

  iconBC();

  })

  function iconABC(){

  $(".bgk1").css("background-position" , 0+"px "+positionC[iconC]+"px");

  iconC++;

  if(iconC>positionC.length){

  iconC=positionC.length;

  return;

  }

  t1=setTimeout(iconABC,80);

  console.log("sdd"+iconC)

  }

  function iconBC(){

  clearTimeout(t1);

  iconC--;

  if(iconC<0){

  iconC=0;

  return;

  }

  $(".bgk1").css("background-position" , 0+"px "+positionC[iconC]+"px");

  i1=setTimeout(iconBC,20);

  console.log("--"+iconC)

  }

  好了,現在是不是就可以實現了呢?如果大家還是存在不理解的地方,或者總是有出錯的地方,都是可以留言咨詢的。

  本文由專業的鄭州app開發公司燚軒科技整理發布,原創不易,如需轉載請註明出處。

HTML編程之利用jquery制作長圖動畫的方法