github上的demo，自己拿来改了改。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>parallax</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.container{
width:100%;
height:600px;
background: #444;
}
.wrapper{
width:50%;
height:600px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<ul id="scene">
<li class="layer" data-depth="0.00"><img src="./img/layer1.png"></li>
<li class="layer" data-depth="0.20"><img src="./img/layer2.png"></li>
<li class="layer" data-depth="0.40"><img src="./img/layer3.png"></li>
<li class="layer" data-depth="0.60"><img src="./img/layer4.png"></li>
<li class="layer" data-depth="0.80"><img src="./img/layer5.png"></li>
<li class="layer" data-depth="1.00"><img src="./img/layer6.png"></li>
</ul>
</div>
</div>
<!--<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/parallax/jquery.parallax.min.js"></script>-->
<script type="text/javascript" src="./js/parallax/parallax.min.js"></script>
<script type="text/javascript">
//var scene = $("#scene");
var scene = document.getElementById(‘scene‘);
var parallax = new Parallax(scene);
</script>
</body>
</html>
时间： 2024-08-05 15:16:08