HTML程式設計之利用jquery製作長圖動畫的方法
在網站前端程式設計開發中，我們經常會遇到需要將圖片設定為背景圖，當滑鼠移入時利用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開發公司燚軒科技整理髮布，原創不易，如需轉載請註明出處。