用jQuery手风琴滑块插件编写计算

时间:2016-09-12 21:04:30

标签: javascript jquery jquery-plugins frontend

我正在尝试编写用于制作手风琴的jQuery插件。

容器内的所有物品都需要减小其宽度,以便所有物品都能显示在一行上。

在项目悬停时,其余项目应减小宽度,以便悬停项目可以原始宽度显示。

尝试初始设置项目时发生错误:最后一项消失。 数学是:

     public function getDp()
{
    if ($this->dp()->count()===0)
    {
        return 'public/image/standard_dp.jpg';
    }
    return $this->dp()->orderBy('created_at', 'desc' )->first()->url;
}

然后:

slider-width / all-items-width

我在计算什么错误?

each-item * (slider-width / all-items-width)

继承人演示:https://jsfiddle.net/12345/8zd9nmvf/23/

1 个答案:

答案 0 :(得分:0)

问题是CSS - 我在宽度变为自动之前计算所有图像的宽度。

所以我在计算之前移动了css属性并修复了它:

//some CSS Settigns
SlideR.find(elmwrap).css({
  'transition': 'width .2s ease-in',
  'height': sliderH,
  'overflow': 'hidden',
  'position': 'static'
}).find('img').css({
  height: sliderH,
  width: 'auto',
  'position': 'relative',
  'max-width': 'none'
});

var imgaesWidth = 0;
thumbImg.each(function(index, el) {
  imgaesWidth += $(el).width();
});
var margineach = SliderWidth / imgaesWidth;