首页 新闻 会员 周边 捐助

求助,js视差滚动问题

0
悬赏园豆:20 [已解决问题] 解决于 2015-02-28 18:01

页面很简单,代码不多,只有两幅背景图,一个背景色,想做成视差滚动,但不知道哪里出了问题,特来请教:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>背景视差滚动</title>
 5     <meta charset="utf-8" />    
 6 </head>
 7     <style type="text/css">
 8     body {
 9         background-color: #252525;
10         background-image: url(img/parallax-back.png);
11         background-attachment: fixed !important;
12         background-clip: border-box;
13         background-origin: padding-box;
14         background-position: 0 0;
15         background-repeat: repeat;
16         background-size: auto auto;
17         height: 2000px;
18     }
19 
20     #parallax-fore {
21         background-attachment: fixed;
22         background-image: url(img/parallax-fore.png);
23         height: 100vh;
24         left: 0;
25         pointer-events: none;
26         position: fixed;
27         top: 0;
28         width: 100%;
29         z-index: -1;
30     }
31     </style>
32 <body>
33     <div id="parallax-fore"></div>
34 
35 
36     <script type="text/javascript">
37     
38         var parallaxIt = new function(){
39 
40           var foreLayer,backLayer;
41 
42           function onScroll(e){
43             var Y = window.pageYOffset;
44             backLayer.style.backgroundPosition = " 0 -" + Y*0.6 + "px";
45             foreLayer.style.backgroundPosition = " 0 -" + Y*0.8 + "px";
46           }
47 
48           this.init = function() {
49             foreLayer = document.getElementById("parallax-fore");
50             backLayer = document.body;
51             window.addEventListener("scroll",onScroll);
52           };
53 
54         }
55         parallaxIt.init();
56     </script>
57 </body>
58 </html>
夜之圣子的主页 夜之圣子 | 初学一级 | 园豆:5
提问于:2015-02-28 17:19
< >
分享
最佳答案
0

咳咳,原来是没问题的,是我的错,我打开的方式不对!

夜之圣子 | 初学一级 |园豆:5 | 2015-02-28 18:00
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册