javascript - (响应)在 javascript 中将宽度单位从 px 更改为 %

Question

所以我的页面上有一个内容 slider :http://helpmyedu.com/asdtest-2 ，我想让它响应(100% 宽度)..

我已通过在开发者工具中更改以下代码成功地使其响应:

但是，我只能更改样式表中的前100%，后面两个由这段javascritp控制:

    <script type="text/javascript">

        $(document).ready(function() {
            $.noConflict();

            jQuery('#services-example-1').services(
                {
                    width:1144,
                    height:300,
                    slideAmount:6,
                    slideSpacing:30,
                    touchenabled:"on",
                    mouseWheel:"on",
                    hoverAlpha:"off",
                    slideshow:6000,
                    hovereffect:"on",
                    callBack:function() { }

                });


    });
    </script>   

如何将“width: 1144”变成%？

或者如何让这个 slider 响应？ 多谢!

Answer 1

您不能简单地更改一个位置并使此 slider 响应。您当然可以更改您的 js 中的值，但您仍然会得到全宽 slider ，因为所有子元素仍处于其原始大小。

您可以做的是覆盖您的 css 中的每个元素(类如 .imgholder .thumb 等)，以便它响应页面大小，另外，您必须将 js 中的宽度调整为基于页面宽度，像这样:

var sliderwidth = 
                    Math.round(parseInt(jQuery('#services-example-1').css('width'))-(50)); //Leave some margin for padding and scroll bar
                    jQuery('#services-example-1').services(
                        {
                            width:sliderwidth,
                            height:300,
                            slideAmount:6,
                            slideSpacing:30,
                            touchenabled:"on",
                            mouseWheel:"on",
                            hoverAlpha:"off",
                            slideshow:6000,
                            hovereffect:"off"
                        });

我希望这会解决你的问题，但我没有改变高度，因为你仍然需要那个高度来包含你的图像。

我注意到另外两件事: 1. 这个 jquery slider 插件有点问题，尤其是当你调整页面大小时，卡住你的浏览器一会儿， slider 可能会丢失 2. 你的页面中有太多的css和js，它们真的都是必要的吗？放慢你的网站伙伴。