使用 JQuery/CSS 跨页滑动 Div
Posted
技术标签:
【中文标题】使用 JQuery/CSS 跨页滑动 Div【英文标题】:Slide Div Across Page using JQuery/CSS 【发布时间】:2019-07-07 13:24:48 【问题描述】:我使用了下面的代码,它使得每次点击 div 时它都会动画并在页面上移动,从而在它之后移动下一个。
http://jsfiddle.net/jtbowden/ykbgT/2/
但是,我正在尝试使其每 3 秒自动滚动一次,而无需单击。我已经尝试使用计时器对 javascript 进行以下调整,但它似乎只是显示出来并且不能正确滚动:
<script>
$('.box').click(function ()
$(this).animate(
left: '-50%'
, 500, function ()
$(this).css('left', '150%');
$(this).appendTo('#container');
);
$(this).next().animate(
left: '50%'
, 500);
);
$(document).ready(function ()
setInterval(function ()
$('.box').click();
console.log("BOX CLICKED.");
, 3000);
);
</script>
有人有什么想法吗?
谢谢
【问题讨论】:
【参考方案1】:类似于 Zack 的回答(但更简单,恕我直言),我发现以下内容适合您
id = 1
setInterval(function()
$('#box' + id).animate(
left: '-50%'
, 500, function()
$(this).css('left', '150%');
$(this).appendTo('#container');
);
$('#box' + id).next().animate(
left: '50%'
, 500);
id = id <= 5 ? id + 1 : 1;
,4000)
【讨论】:
更好的方法。当涉及到这样的小调整时,我很傻。【参考方案2】:使用以下调整对其进行排序:
<script>
ActiveDashboards = ;
ActiveDashboards["Projects"] = true;
ActiveDashboards["SHEQs"] = false;
ActiveDashboards["HR"] = false;
function ShowNextDashboard()
if (ActiveDashboards["Projects"] == true)
//Hide this one.
$('#box1').animate(
left: '-50%'
, 500, function ()
$('#box1').css('left', '150%');
$('#box1').appendTo('#container');
);
//Show SHEQs one.
$('#box2').animate(
left: '50%'
, 500);
ActiveDashboards["Projects"] = false;
ActiveDashboards["SHEQs"] = true;
else if (ActiveDashboards["SHEQs"] == true)
//Hide this one.
$('#box2').animate(
left: '-50%'
, 500, function ()
$('#box2').css('left', '150%');
$('#box2').appendTo('#container');
);
//Show HR one.
$('#box3').animate(
left: '50%'
, 500);
ActiveDashboards["SHEQs"] = false;
ActiveDashboards["HR"] = true;
else if (ActiveDashboards["HR"] == true)
//Hide this one.
$('#box3').animate(
left: '-50%'
, 500, function ()
$('#box3').css('left', '150%');
$('#box3').appendTo('#container');
);
//Show Projects one.
$('#box1').animate(
left: '50%'
, 500);
ActiveDashboards["HR"] = false;
ActiveDashboards["Projects"] = true;
$(document).ready(function ()
setInterval(function ()
ShowNextDashboard();
, 4000);
);
</script>
可能是一种更好的方法,但它工作正常并且可以滚动浏览每一个。
【讨论】:
以上是关于使用 JQuery/CSS 跨页滑动 Div的主要内容,如果未能解决你的问题,请参考以下文章