（响应）在javascript中将宽度单位从px更改为％

Question

所以我在页面上有一个内容滑块：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”变为％？

或者我怎么能让这个滑块响应？ 谢谢你！

Answer 1

您不能简单地更改一个位置并使此滑块响应。您当然可以更改js中的值，但仍然可以获得全宽度滑块，因为所有子元素仍然是原始大小。

你可以做的是覆盖你的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滑块插件有点儿麻烦，特别是当你调整页面大小时，冻结你的浏览器一段时间，滑块可能会丢失 你的页面中有很多css和js，它们真的有必要吗？减缓你的网站配偶。