jquery - 带有向上/向下箭头的垂直文本框轮播

Question

我正在建立一个 wordpress 网站，我的客户向我发送了 PSD 文件并将它们转换为 HTML，然后准备好 wordpress 文件。他在“关于我们”页面中寻找的是一个具有固定宽度和高度的文本框，其中包含滚动按钮查看图像以准确了解他希望它看起来像什么。 http://imgur.com/eW3ggwt

我试图将其设为滚动条文本，但没有达到应有的效果。我在 google 上搜索文本轮播找不到适合我需要的任何解决方案。

我将不胜感激有关如何使这种情况发挥作用的任何建议。

Answer 1

你想做的事情可以通过 overflow hidden 和像这里的例子一样操纵测试的最高值来实现 http://jsfiddle.net/nr0htmrb/1/

HTML

<div>
    <p>
        loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quas est sed temporibus nam sint impedit quos voluptatem. Nam sunt voluptate culpa pariatur nisi soluta aspernatur error? Consequatur quibusdam maiores!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam non facere ratione sit neque eligendi quibusdam fugit. Alias unde necessitatibus ipsum nesciunt nulla ad quo reprehenderit quia laborum exercitationem totam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ducimus illum ullam consectetur error eligendi aperiam molestiae velit sequi iusto possimus libero vel cupiditate quibusdam sit animi ipsum accusamus suscipit.
    </p>
</div>
<span class="up">UP</span>
<span class="down">Down</span>

CSS

div {
    width: 200px;
    height: 200px;
    background: #e3e3e3;
    overflow: hidden;
    position: relative;
}

p {
    position: absolute;
    top: -10px;
}

span {
    margin-top: 20px;
    color: blue;
    margin-left: 10px;
    cursor: pointer;
}

查询

$(".up").click(function() {
     var currentTop = parseFloat($("p").css('top').replace('px', ''));
     var newTop = currentTop - 20;
     $("p").animate({top: newTop + "px"});
});

$(".down").click(function() {
     var currentTop = parseFloat($("p").css('top').replace('px', ''));
     var newTop = currentTop + 20;
     $("p").animate({top: newTop + "px"});
});

如果你想让它也与滚动一起工作，你也可以在检测向上向下滚动时调用相同的向上向下函数