页面向下滚动内容滑动展示出来效果

1、新建html文档。

2、书写hmtl代码。

<div>

<ul>

<li class="div1"><a href="#">111111</a></li>

        <li class="div2"><a href="#">222222</a></li>

        <li class="div3"><a href="#">333333</a></li>

        <li class="div4"><a href="#">444444</a></li>

        <li class="div5"><a href="#">555555</a></li>

        <li class="div6"><a href="#">666666</a></li>

        <li class="div7"><a href="#">777777</a></li>

    </ul>

</div>

3、书写css代码。

<style>

body{ margin:0; padding:0; font-size:14px;}

ul li{height: 10em;text-align: center; vertical-align: middle;line-height: 10em; font-size: 1.5em; margin: 2em 1em; }

.div1{ background: #A3C6BE; color: #403F31;}

.div2{ background: #87A18E; color: #000; }

</style>

4、书写并添加js代码。

<script src="jquery-1.10.1.min.js"></script>

<script src="js/flowup.js"></script>

<script>

$(function(){

$("body").flowUp("div ul li", { transalteY: 350, duration: 1 });

});

</script>

5、代码整体结构。

6、查看效果。