Question

我正在构建一个wordpress网站，我的客户端将PSD文件发送给我并将其转换为HTML然后准备好wordpress文件。他在关于我们页面中寻找的是一个具有固定宽度和高度的文本框，其中有滚动按钮查看图像，以确切了解他想要的样子。 http://imgur.com/eW3ggwt

我试图将其设为滚动条文本但不能正常工作。我用谷歌搜索文本轮播无法找到任何符合我需要的解决方案。

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

Answer 1

您尝试做的事情可以通过隐藏溢出和操纵测试的最高值来实现，例如此示例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;
}

Jquery的

$(".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"});
});

如果你想让它与滚动一起使用，你也可以在检测向下滚动时调用相同的向上功能

带上/下箭头的垂直文本框轮播

1 个答案: