css3 html5上下滚动效果

其中，CSS3的上下滚动效果是很受欢迎的一种特效。通过定位和动画特性，实现网页上下滚动的效果。以下是代码实现的步骤：

//HTML代码div class="scroll">
       p>
    内容/p>
       p>
    内容/p>
       p>
    内容/p>
       p>
    内容/p>
    /div>
//CSS代码.scroll{
      overflow:hidden;
      position:relative;
       height:260px;
      margin:0 auto;
      border:1px solid #000;
}
.scroll p{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:260px;
      line-height:260px;
      text-align:center;
}
//JS代码function a() {
    $('.scroll').animate({
        marginTop: "-260px"    }
, 2000, function () {
        $(this).css({
 marginTop: "0" }
    ).find("p:first").appendTo(this);
    }
)}
    ;
$(function () {
        var time = setInterval('a()', 3000);
    $('.scroll').hover(function () {
            clearInterval(time);
    }
, function () {
            time = setInterval('a()', 3000);
    }
)}
    )

在HTML代码中，设定了一个div的类名为“scroll”，在CSS代码中对该类进行了样式的设置，如overflow、position、height等进行设定。对p标签设置绝对定位，通过top、left、width和height等属性，使每一行p标签能够落入div容器内进行重叠。在JS代码中，设置了一个名为“a”的函数，该函数是实现网页上下滚动的核心,在函数中通过margin-top的值来实现网页滚动的效果。通过使用计时器setInterval（）和clearInterval（），控制网页自动滚动并且当鼠标放上去时停止滚动。

以上就是CSS3的上下滚动效果的一个案例，通过代码的编写实现了网页上下滚动的特效，让网页更加丰富和美观。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！