响应式JavaScript – 加载/隐藏与浏览器宽度相关的特定function?
首先:我不是JavaScript / JQuery! ……但我会试着指出我想做什么。
我正在我的页面上使用梦幻般的bx滑块,我通过媒体查询使我的网站响应,这两个目前都很好。 …但是bx-slider-script中有一些function我不想在特定的浏览器宽度上激活。 这就是我想要的:
browser-width LOWER比500px =加载此函数:
$('#slider4').bxSlider({ minSlides: 2, maxSlides: 2, slideWidth: 230, slideMargin: 10, nextSelector: '#next', prevSelector: '#prev', infiniteLoop: false, hideControlOnEnd: true, pager: false, useCSS: false, easing: 'easeInOutExpo', speed: 1000 });
浏览器宽度高于500px =隐藏上面的函数并加载这个:
$('#slider4').bxSlider({ minSlides: 4, maxSlides: 4, slideWidth: 230, slideMargin: 20, nextSelector: '#next', prevSelector: '#prev', infiniteLoop: false, hideControlOnEnd: true, pager: false, useCSS: false, easing: 'easeInOutExpo', speed: 1000 });
…甚至可以在JavaScript中使用? 我尝试了一些使用突破点的脚本,但它认为我的JS知识很弱,无法按照我的意愿使用它。
如果有人在这里可以告诉我如何轻松地做到这一点,那将是很棒的!
If($(document).width() < 500){ ... }else{ ... }
您可能还想要进行onchange事件
$( window ).resize(function() { resizefunction(); });