【问题标题】:Moving Boxes jquery plugin variable widths移动框 jquery 插件可变宽度
【发布时间】:2012-06-20 23:35:02
【问题描述】:

我正在考虑使用http://css-tricks.com/moving-boxes/ jquery 插件。 有人可以告诉我是否可以让它处理可变宽度的面板?

我需要一个图像滑块/轮播,将当前图像居中并显示一半的上一张和下一张图像。移动框非常棒,几乎符合要求,只需要仍然滑动到中心的可变宽度图像。

【问题讨论】:

    标签: jquery slider


    【解决方案1】:

    是的,这是可能的,调整 HTML 中 div .inside 和 .img 的宽度以适应图像的实际大小,并删除 CSS 中将在幻灯片期间重新分配宽度的行。您可以通过在查看演示时检查元素并在浏览器中编辑它们来做到这一点。

    编辑 CSS 和 HTML,另外 img 大小和容器大小在 jQuery 中设置,这是在 slider.js 的顶部

            var totalPanels         = $(".scrollContainer").children().size();
    
    var regWidth            = $(".panel").css("width");
    var regImgWidth         = $(".panel img").css("width");
    var regTitleSize        = $(".panel h2").css("font-size");
    var regParSize          = $(".panel p").css("font-size");
    
    var movingDistance      = 300;
    
    var curWidth            = 350;
    var curImgWidth         = 326;
    var curTitleSize        = "20px";
    var curParSize          = "15px";
    

    尝试根据需要删除/编辑这些值

    【讨论】:

    • 您好,非常感谢您的帮助。我尝试删除所有宽度样式并将宽度放在 HTML 中的实际 img 标签上,但是当它加载时,它会采用第一个元素的宽度并将所有宽度设置为该值。有什么想法吗?
    • 非常感谢 scott,有机会我会试试的。干杯队友
    猜你喜欢
    • 2013-04-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多