0

我在 drupal 工作..我使用 jquery 制作了幻灯片，但是图像在不同的浏览器中显示不同的大小。是否可以以％设置宽度和高度

<script src="http://test/sites/js/jqFancyTransitions.1.8.min.js" type="text/javascript"></script>
<script>
$('#ft').jqFancyTransitions({
    effect: 'zipper', // wave, zipper, curtain
    width: 682, // width of panel
    height: 268, // height of panel
    strips: 20, // number of strips
    delay: 2500, // 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
    navigation: false, // prev and next navigation buttons
    links: false // show images as links
});
4

4 回答 4

2

试试这个

width : screen.width * (desired percentage/100),
height: screen.height * (dsired percentage/100),
于 2012-04-18T10:52:08.040 回答
0

我看不到您可以直接在插件代码中，但是您可以省略宽度和高度线并使用 css 从样式表中设置相关图像的样式，并在此处以百分比设置尺寸

于 2012-04-18T07:39:18.630 回答
0 
// set panel
        $('#'+el.id).css({
            'background-image':'url('+img[el.id][0]+')',
            'width': params.width,
            'height': params.height,
            'position': 'relative',
            'background-position': 'top left'
            });

例如： 

// set panel
        $('#'+el.id).css({
            'background-image':'url('+img[el.id][0]+')',
            'width': a%,
            'height': b%,
            'position': 'relative',
            'background-position': 'top left'
            });

这是来自 jqFancyTransitions.1.8.js 的相关代码

您可以尝试将params.width和params.height值替换为百分比，而不是全部，而是在//set panel您的参数上分配 css 的位置。然而，这两个变量也在代码的其他地方使用。除非您尝试一下，否则您可能永远不知道它们会产生什么影响。

于 2012-04-18T07:44:09.077 回答
0

我看不出更改为如何% width & height使您的图像在不同的浏览器上具有相同的大小。

定义width & heightinpx是在所有浏览器中具有相同大小的最佳选择。

但如果你真的想要，你应该修改那个函数参数并设置如下：

   $.....
   $width: '80%', // width of panel
   $height: '60%', // height of panel
   $.....
于 2012-04-18T07:44:45.273 回答