gpt4 book ai didi

javascript - jQuery UI slider 问题

转载 作者:行者123 更新时间:2023-11-30 18:43:44 24 4
gpt4 key购买 nike

我在使用 jQuery UI slider 小部件时遇到了一些问题。我可以让 slider 本身工作,但它不会滑过任何内容。你可以在这里看到我正在处理的网站: jquery slider problem

我希望带有青色边框框的 div 在您使用处理程序滑动时滑过,但我就是无法让它工作。这是我目前使用的标记:

<div id="content-scroll" class="reference-scroller">
<div id="content-holder" class="reference-content">
<div id="content-slider"></div>
<ul>
<li class="content-item">test1</li>
<li class="content-item">test2</li>
<li class="content-item">test3</li>
<li class="content-item">test4</li>
<li class="content-item">test5</li>
.....
</ul>
</div>
</div>

slider 插件是这样启动的:

$("#content-slider").slider({
animate: true,
change: handleSliderChange,
slide: handleSliderSlide
});

function handleSliderChange(e, ui)
{
var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-scroll").width();
$("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide(e, ui)
{
var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-scroll").width();
$("#content-scroll").attr({scrollLeft: ui.value * (maxScroll / 100) });
}

有人对此有什么建议吗? :-) 非常感谢任何输入!

祝一切顺利

最佳答案

终于找到破绽了! :-)

jQuery 1.6.1 区分了attr()和prop(),所以我改了:

function handleSliderChange(e, ui)
{
var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-scroll").width();
$("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide(e, ui)
{
var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content- scroll").width();
$("#content-scroll").attr({scrollLeft: ui.value * (maxScroll / 100) });
}

收件人:

function handleSliderChange(e, ui)
{
var maxScroll = $("#content-scroll").prop("scrollWidth") - $("#content-scroll").width();
$("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide(e, ui)
{
var maxScroll = $("#content-scroll").prop("scrollWidth") - $("#content-scroll").width();
$("#content-scroll").prop({scrollLeft: ui.value * (maxScroll / 100) });
}

现在它可以正常工作了!

关于javascript - jQuery UI slider 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6088997/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com