php - 在jQuery中将宽度和高度更改为百分比

Question

我正在使用 jquery 幻灯片。我必须将宽度和高度更改为百分比值。

jquerytransitions.js 包含以下代码

$.fn.jqFancyTransitions.defaults = {    
        width: 682, // width of panel
        height: 268, // height of panel
        strips: 10, // number of strips
        delay: 5000, // delay between images in ms
        stripDelay: 50, // delay beetwen strips in ms
        titleOpacity: 0.7, // opacity of title
        titleSpeed: 1000, // speed of title appereance in ms
        position: 'alternate', // top, bottom, alternate, curtain
        direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
        effect: '', // curtain, zipper, wave
        navigation: false, // prev next and buttons
        links : false // show images as links       
    };

})(jQuery);

我必须将宽度和高度更改为百分比..这可能吗？

Answer 1

您可以尝试将 width: 682, height: 268 替换为

width : screen.width * (47.45/100),
height: screen.height * (29.8/100),

Answer 2

我唯一能想到的就是手动计算：

var percentage = 25; //Your desired percentage
daddyWidth = $('#daddyElelement').width();
finalWidth = daddyWidth*percentage/100;

通过向“参数数组”添加更多元素，使您的脚本采用更多选项，最后您可以放置​​这些元素而不是像素数

width: finalWidth , // width of panel

Answer 3

如果您希望宽度和高度相对于浏览器窗口，请使用：

...
width : window.innerWidth * (percentage/100),
height: window.innerHeight * (percentage/100),
...

或者，如果您希望它相对于任何其他元素：

...
width : element.offsetWidth * (percentage/100),
height: element.offsetHeight * (percentage/100),
...