Question

我目前在wordpress中的自定义页面模板上有一个div（.scrolls）水平滚动。一切都很好，但我希望div在页面加载时自动从左向右慢慢滚动。我已经研究过tinyscrollbar和其他几个，但是没能做任何事情。我正在使用论文主题，虽然有一个放置标题脚本的地方，我似乎无法正确编码！

我是一个完整的jquery newb，无法找到一个简单的教程，字面上说“这个确切的代码<script>...</script>就在这里。有人可以帮忙吗？

Answer 1

在Jquery中尝试使用它：

$(document).ready(function() {
    var sL = $(this).width();
    $('.scrolls').animate({
        scrollLeft : sL
    },5000)
})

只需更改5000即可设置所需的时间。

演示 Fiddle

Answer 2

以下是移动此页面正文的示例。

var movement = 0;  
setInterval(function () { 
$('body').css('margin-left', movement + 'px');
movement += -10; 
}, 400);

在你的控制台中运行它，看看会发生什么。

或者你可以像这样使用CSS动画

@keyframes moveLeft
{
from {margin-left: 0;}
to {margin-left: -100px;}
}

@-webkit-keyframes moveLeft /* Safari and Chrome */
{
from {margin-left: 0;}
to {margin-left: -100px;}
}
#divToMove
{
animation: moveLeft 5s;
-webkit-animation: moveLeft 5s; /* Safari and Chrome */
}

Answer 3

使用Jquery，您可以尝试此操作

$(".scrolls").animate({ scrollLeft: valueToScroll }, { duration: 200 } );

其中valueToScroll应该是您要滚动的数量

Div页面加载时自动滚动 - Wordpress

3 个答案: