Question

我正在尝试创建文本幻灯片效果。一个示例是将TS转换为TextSlide，以便：

T会向左滑动，因为幻灯片ext会显示
S留在原地，但lide向右滑出。

知道如何做到这一点？

   TS
T-->S--->
TextSlide

看看这个JSFiddle

Answer 1

我认为这就是你要找的东西： http://jsfiddle.net/j3p8L8g7/

CSS：

.one, .two, .three, .four {
display: inline-block;
}

.two, .four {
    overflow: hidden;
}

使用Javascript：

var oldWidths = [];

$( document ).ready(function() {

    oldWidths[0] = $(".two").width();
    oldWidths[1] = $(".four").width();

    $(".two").css("width",0);
    $(".four").css("width",0);

    $("#button").click(function(){
        slide();
    });

});

function slide(){
    $(".two").animate({
        width:oldWidths[0]
    },1000);
    $(".four").animate({
        width:oldWidths[1]
    },1000);
}

Answer 2

你想要哪一个：

    <marquee>This text will scroll from right to left</marquee>

<marquee direction="up">This text will scroll from bottom to top</marquee>

<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
  <marquee behavior="alternate">
    This text will bounce
  </marquee>
</marquee>

来源：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

Answer 3

以下是您的确切代码：

CSS：

.one, .two, .three, .four {
    display: inline-block;
    position: relative;
    float: left;
}

.one{
    left: 400px;
}
.four{
    left:-60px;
}
.two{
    display: none;
}

Jquery的：

$(document).ready(function(){
   $('.one').animate({left:'0px'}, function(){
      $('.two').fadeIn('slow');
      $('.four').animate({left:'0px'});
   });
});

使用左侧幻灯片效果动画文本

3 个答案: