如何使用jQuery製作圖像跳轉

-3

是否有可能在jQuery中使用animate（）方法，不僅給圖像彈跳但希望穿過屏幕的錯覺，所有方法都一樣？（即圖像跳躍般劃過你的瀏覽器屏幕上每25個像素，做3個跳？如何使用jQuery製作圖像跳轉

這裏是我迄今爲止...

//THE CSS: 

.mimage { 
margin:0 auto; 
position:relative; 
top:-200px; 
right:10px; 
width:57px; 
height:75px; 
display:block; 
outline:#fff; 
font-size:0px; 
background: url('mimage.png') top center no-repeat; 
} 


//THE JQUERY: 

function extensions() { 
/**************/ 
//JQ EXTENSIONS 
/**************/ 
jQuery.extend(jQuery.easing,{ 
easeInOutBack: function (x, t, b, c, d, s) { 
if (s == undefined){ s = 1.70158;} 
if ((t/=d/2) < 1) {return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;} 
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; 
} 
}); 
//*/ 
} 

function mhop() { 
/*HOPING ELF*/ 
$.hop = function() { 
var mimage = $("#hc-elf-top"); 
var position = mimage.position(); 

if(position.top < 0) { 
mimage.animate({top:'+=200px'},'slow','easeInOutBack', $.hop); 
} else { 
mimage.animate({top:'-=200px'},'slow','easeInOutBack', $.hop); 
} 
} 
$.hop(); 
//*/   
} 

//RUN THE CODE: 

(function($){ 
extensions(); 
$(window).load(function(){ 
mhop(); 
}) 
})(jQuery);

正如你所看到的，我能夠使元素反彈，但我也想延長我的scrpit使精靈跳25個像素的權利。有什麼想法？

感謝您的任何意見！

MY UPDATE

非常感謝Abraham在使用動畫方法（）下的左側屬性時的提示。結果，我終於可以用下面的自定義函數來幫助我的小精靈跳過屏幕。不僅如此，您還可以調整循環值以確定您想要的跳數。隨意使用！

function mhop() { 
    /*ELF HOPS ACROSS SCREEN*/ 

    var loop = 0; 
    var elftop = $("#hc-elf-top"); 

    $.hop = function() { 

    //ANIMATE THE TOP ELF TO HOP 
    var elftopposition = elftop.position(); 
    if(elftopposition.top < 0) { 
    elftop.animate({top:'+=200px',left:'+=25px'},'slow','easeInOutBack', $.hop); 
    } else { 
    elftop.animate({top:'-=200px',left:'+=25px'},'slow','easeInOutBack', $.hop); 
    } 

    //ADJUST HOW MANY HOPS THE ELF TAKES... 
    if (elftopposition.top == 0) { 
     loop += 1; 
     if (loop == 2) { //ADJUST HERE 
     console.log('stop hopping'); 
     elftop.stop(true, true); 
     } 
    } 

} 

//LOOP THE FUNCTION 
$.hop(); 
//*/   
} 

(function($){ 
    extensions(); 
    $(window).load(function(){ 
    mhop(); 
    }) 
    })(jQuery);

來源

2013-11-20 blackhawk

它確實有可能。但是你需要先嚐試一些東西，就像SO的政策一樣。 – j08691

謝謝@ j08691提示！我的代碼已發佈。有什麼想法嗎？ – blackhawk

你想增加每個跳躍25px的左邊位置？像這樣[http://jsfiddle.net/94Mn3/](http://jsfiddle.net/94Mn3/） –

，你的動畫跳函數內部的頂部像這樣

if(position.top < 0) { 
    mimage.animate({top:'+=200px',left:"+=25px"},'slow','easeInOutBack', $.hop); 
    console.log('the current position is: '+ position.top); 
} else { 
    mimage.animate({top:'-=200px',left:"+=25px"},'slow','easeInOutBack', $.hop); 
}

你可以動畫動畫裏面不止一個CSS屬性來移動你需要動畫左側位置的.mimage http://jsfiddle.net/94Mn3/

來源

2013-11-20 17:59:04

如何使用jQuery製作圖像跳轉

回答

相關問題