如何使背景图像和jquery动画响应?

时间:2016-11-12 14:36:53

标签: jquery html css

我正在建立一个包含各种背景图片的网站。但我的疑问是,当我在移动版中看到时,每个背景都没有正确显示设备。我还将jquery应用于动画,其中包含桌面版本中的margin-left到margin-top动画。那么,在移动设备中如何播放我的jquery动画。我的背景图像css如下。

.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,因为它包含边距类动画?请帮帮我...感谢提前.. !!

1 个答案:

答案 0 :(得分:0)

尝试使用jquery进行背景图片幻灯片放映,并使用CSS3媒体查询进行响应。

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

同样可以处理断点。