[英]Load JQuery script if screen size
我正在建立的网站上使用此图片轮播。
如果屏幕尺寸大于768px,我希望它运行:
var slider = new MasterSlider();
slider.setup('masterslider' , {
width:1440, // slider standard width
height:400, // slider standard height
space:5,
layout:'boxed',
});
// adds Arrows navigation control to the slider.
slider.control('arrows');
如果屏幕尺寸小于768像素,我希望它杀死之前的脚本并运行。
var slider = new MasterSlider();
slider.setup('masterslider' , {
width:1440, // slider standard width
height:400, // slider standard height
space:5,
layout:'autofill',
});
// adds Arrows navigation control to the slider.
slider.control('arrows');
我尝试使用Modernizr mq实现此目的,但触发器似乎不起作用:
if (Modernizr.mq('(max-width: 767px)')) {
// Script option 1
} else {
// Script option 2
}
我想在调整视口大小时执行此操作,并避免刷新。
我在这里做错了什么?
尝试修改调整大小事件的行为。
window.addEventListener("resize", updateLayout, false);
function updateLayout() {
if(window.innerWidth > 767) {
// modify to layout one
} else {
// modify to other layout
}
}
您应该能够通过三元运算符设置layout属性,因此您无需指定两个单独的init函数。
var slider = new MasterSlider();
slider.setup('masterslider' , {
width: 1440, // slider standard width
height: 400, // slider standard height
space: 5,
layout: $(document).width() > 768 ? 'boxed' : 'autofill'
});
// adds Arrows navigation control to the slider.
slider.control('arrows');
试试这个解决方案:
function check_device(){
if($(window).width() > 768){
var slider = new MasterSlider();
slider.setup('masterslider' , {
width:1440, // slider standard width
height:400, // slider standard height
space:5,
layout:'boxed',
});
// adds Arrows navigation control to the slider.
slider.control('arrows');
}else{
var slider = new MasterSlider();
slider.setup('masterslider' , {
width:1440, // slider standard width
height:400, // slider standard height
space:5,
layout:'autofill',
});
// adds Arrows navigation control to the slider.
slider.control('arrows');
} //END CHECK DEVICE SIZE
}//END check_device FUNCTION
$(window).resize(function(){
check_device();
});
$(document).ready(function() {
check_device();
});
希望能帮助到你。
文斯。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.