Question

我正在建立一个包含各种背景图片的网站。但我的疑问是，当我在移动版中看到时，每个背景都没有正确显示设备。我还将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，因为它包含边距类动画？请帮帮我...感谢提前.. !!

Answer 1

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

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

同样可以处理断点。

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

1 个答案: