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>