Question

我想在移动设备上显示不同的图像集。我正在使用Vegas Jquery Slider http://vegas.jaysalvat.com/

我的问题有点模糊，我可以找到我需要的东西。我会使用窗口大小jquery吗？或者if ... else ...声明？

这是我的代码。

<script type="text/javascript">
$.vegas('slideshow', {
backgrounds:[
  { src:'img/familyoutsidehome5-dark.jpg', fade:1000 },
  { src:'img/familyoutsidehome3-dark.jpg', fade:1000 },
  { src:'img/familyoutsidehome4-dark.jpg', fade:1000 },
  { src:'img/familyoutsidehome-dark.jpg', fade:1000 }
]
});
</script>


<script type="text/javascript">
$.vegas.defaults = {
 background: {
   src:         null, // defined by Css
   align:       'center',
   valign:      'center',
   fade:        0,
   loading      true,
   load:        function(){},
   complete:    function(){}
 },
 slideshow: {
   step:        0,
   delay:       5000,
   backgrounds: [],
   preload:     false,
   walk:        function(){}
 },
 overlay: {
   src:         null, // defined by Css 
   opacity:     null  // defined by Css 
 }
 }
</script>

Answer 1

如果我是对的，你想要的是网站根据屏幕尺寸做出响应。你甚至不需要使用javascript。 css media可以做到：

@media (max-width: 500px) and (max-height: 500px) {
  div.element1 {
    background-image: url('background1.png');
  }

  div.element2 {
    background-image: url('background2.png');
  }
}

您只需更改javascript中的类即可更改背景图片。

如果您想添加过渡效果，您还可以通过添加过渡来在CSS3中执行此操作：

div.element {
  transition: background-image 1s ease-in-out;
}

移动/屏幕的不同背景幻灯片

1 个答案: