2016-11-12 51 views
1

我正在構建一個包含各種背景圖像的網站。但我的查詢是當我看到移動版本,每個背景都沒有正確顯示設備。我也應用jquery的動畫,其中包含頁邊距左邊緣的動畫在桌面版本。所以,在移動設備中,我怎麼玩我的jQuery動畫。我的CSS背景圖像如下。如何把背景圖像和jQuery的動畫響應?

.home 
{ 
background-image:url("../img/sofa.jpg"); 
background-size:100% 100%; 
background-repeat:no-repeat; 
height:100vh; 
width:100%; 
top:0; 
left:0; 
} 

現在,我的動畫jQuery是如下:

$(document).ready(function(){ 
    setInterval(function(){ 
$("#animate1").fadeIn('slow') 
.animate({'margin-left':'220px','margin-`bottom':'20px'},2000, 
function(){   $('.1st').animate({'opacity':'0'},1000, 
function() {$('.1st').animate({'opacity':'1'})}) 
    }).fadeOut(); 

    $("#animate1").fadeIn('slow') 
.animate({'margin-bottom':'0px','margin-left':'-140px'},2000).fadeOut(); 

    },2000); 
    }); 

我怎麼能發揮我這個jQuery移動版本,因爲它包含保證金類型的動畫?請幫助我...感謝提前..!

回答

0

嘗試使用jQuery進行背景圖片幻燈片播放,並使用CSS3媒體查詢進行響應。

@media screen {max-device:320px }  @media screen{max-device:600px} 

同樣,您可以處理您的斷點。