前端与移动开发项目三

标签：jquer   开发项目   process   water   展开   流行   最新版   back   ado   

<script src="path/to/jquery/jquery.min.js"></script>
<script src="path/to/jquery.stellar.min.js"></script>

引用html

<div class="content" id="content1">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content2">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content3" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content4" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content5" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content6" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>

引入CSS

xxxxxxxxxx body {    font-size: 20px;    color: white;    text-shadow: 0 1px 0 black, 0 0 5px black;}p {    padding: 0 0.5em;    margin: 0;}.content {    background-attachment: fixed;    height: 400px;}#content1 {    background-image: url("xxx.jpg");}#content2 {    background-image: url("xxx.jpg");}#content3 {    background-image: url("xxx.jpg");}#content4 {   background-image: url("xxx.jpg");}#content5 {   background-image: url("xxx.jpg");");}#content6 {    background-image: url("xxx.jpg");}

js调用函数

$.stellar({
    horizontalScrolling: false,
    responsive: true
});

详细参数

前端与移动开发项目三

标签：jquer   开发项目   process   water   展开   流行   最新版   back   ado   

原文地址：http://blog.51cto.com/13517854/2320601