当你在移动设备上时,我想有一个不同的图像显示集。我使用拉斯维加斯Jquery滑块http://vegas.jaysalvat.com/
我的问题有点模糊,我能找到我需要的。我会使用窗口大小的jquery吗?或者如果……其他的……声明吗?这是我的代码。
<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>
如果我是正确的,你想要的是网站是基于屏幕大小响应。你甚至不需要使用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;
}