<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery滚动视觉差图片效果</title> <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"> <link rel="stylesheet" href="css/main.css"> <style> .parallax-wrapper{ position: relative; height:400px; overflow: hidden; } .parallax{ position: relative; background-image:url(img/xiaokeai1.jpg); background-size: cover; height:900px; top:-300px; } </style> </head> <body style="height:2000px;"> <div style="height:300px">视觉差效果</div> <section class="parallax-wrapper"> <figure class="parallax"></figure> </section> <script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script> <script type="text/javascript" src="js/jquery.parallax.js"></script> </body> </html>
转载于:https://www.cnblogs.com/zhouxiaobai/p/8557854.html