jQuery 的 animate 雖然能直接使用 CSS 的方式來進行動畫，但有些屬性其實是不支援的，例如：background-position。很多效果都能直接透過 background-position 的變化來產生，所以就有人把 animate 進行功能的擴充，讓它能支援 background-position 哩。
套件名稱：Background-Position Animation Plugin
套件版本：1.21
作者網站：http://www.protofunc.com/scripts/jquery/backgroundPosition/
套件網址：http://plugins.jquery.com/project/backgroundPosition-Effect
發佈日期：2009-10-22
檔案大小：2.06 KB
檔案下載：jquery.backgroundPosition.js
方法說明：
檢視原始碼 JavaScript
1 2 | // 讓指定元素的背景能進行移動動畫 $(selector).animate({backgroundPosition: 'X Y'}); |
使用範例：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.backgroundPosition.js"></script> <script type="text/javascript"> $(function(){ // 先初始化 #background 的樣式 $('#background').css({ width: '500px', height: '500px', background: 'url(monkey.gif) no-repeat 120px 0' }).click(function(){ $(this).animate({ backgroundPosition: '400px 50px' }).animate({ backgroundPosition: '100px 250px' }).animate({ backgroundPosition: '20px 90px' }).animate({ backgroundPosition: '120px 0' }); }); }); </script> <body> <div id="background"> 點我!! Click Me!! </div> </body> |
您好 想請教一下關於jquery的backgroundPosition設定問題
我var了window scrollTop 出來
接著想將該數值帶入backgroundPosition裡面
但我不知道該怎麼做到讓背景上下移動
code如下:
$(function(){
$(window).scroll(function(){
// move01
if( $(window).scrollTop() > 1 ){
var MOV = $(window).scrollTop()/2
$("#test").css({backgroundPosition: ' '});
//$("#test").css({backgroundPosition: MOV+'px 0'}); 這一行可以移動x軸的backgroundPosition
//$("#test").css('backgroundPosition','0 MOVpx');
}else{
$("#test").css({backgroundPosition: '0px 0px'});
}
});
});