根据窗口宽度动态更改jQuery滑块选项

我想根据窗口宽度（加载和resize）更改jQuery选项。

我找到了接近我需要的解决方案，但我不了解jQuery或javascript足以根据我的需要定制它们。

这是我的jQuery代码：

 var tpj = jQuery; tpj.noConflict(); tpj(document).ready(function () { if (tpj.fn.cssOriginal != undefined) tpj.fn.css = tpj.fn.cssOriginal; tpj('#rev_slider_1_1').show().revolution({ delay: 5000, startwidth: 1920, startheight: 515, hideThumbs: 200, thumbWidth: 100, thumbHeight: 50, thumbAmount: 4, navigationType: "bullet", navigationArrows: "verticalcentered", navigationStyle: "navbar", touchenabled: "on", onHoverStop: "off", navOffsetHorizontal: 0, navOffsetVertical: 20, shadow: 0, fullWidth: "on" }); }); //ready  

我想根据窗口宽度更改startheight 。

如果窗口宽度高于1280，我希望高度值为515，如果低于1280，我希望高度为615，如果宽度小于480，则高度为715。

在另一篇文章的帮助下，我可以使用这个脚本更改我需要的CSS：

 $(window).on('load resize', function () { var w = $(window).width(); $("#rev_slider_1_1 #rev_slider_1_1_wrapper") .css('max-height', w > 1280 ? 515 : w > 480 ? 615 : 715); }); 

但我还需要动态更改jQuery startheight值。

Answer 1

为什么不在CSS中使用百分比。

我在这里创建了一个例子：

http://jsfiddle.net/webwarrior/aLJQm/52/

CSS：

 #slider { width: 90%; } 

要resize，请在resize时使用类似这样的JavaScript：

 var clientWidth = jQuery(window).width(); var clientHeight = jQuery(window).height(); jQuery("#rev_slider_1_1 #rev_slider_1_1_wrapper").height(clientHeight/20); 

现在在图像上尝试以下内容：

 .slotholder{ overflow: hidden; } .slotholder img{ width: 110%; margin-left: -5%; } 

在http://jsfiddle.net/webwarrior/wLFEJ/11/上

心连心

Answer 2

像这样修改’load resize’事件绑定：

 $(window).on('load resize', function () { var w = $(window).width(); $("#rev_slider_1_1 #rev_slider_1_1_wrapper") .css('max-height', w > 1280 ? 515 : w > 480 ? 615 : 715); if(w > 1280) { tpj('#rev_slider_1_1').revolution('option', 'startheight', 515);} else if(w < 1280 && w > 480) { tpj('#rev_slider_1_1').revolution('option', 'startheight', 615); } else { tpj('#rev_slider_1_1').revolution('option', 'startheight', 715); } }); 

这适用于大多数jquery插件，但由于你似乎使用付费插件（http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848将是我的猜测），定制可能是限制 – 所以，一切都好！ 🙂