scroll03-节日两侧的渲染 

 1 body{background: #fff;}
 2 .both{background: url("http://img1.40017.cn/cn/s/ZhuanTi/2015/75603/both.jpg") no-repeat top center;}
 3 
 4 
 5 .top{ width:1200px;margin: 0 auto;}
 6 .top .top01{background:url("http://img1.40017.cn/cn/s/ZhuanTi/2015/75603/top01.jpg?v=1234") no-repeat; height: 176px;}
 7 .top .top02{background:url("http://img1.40017.cn/cn/s/ZhuanTi/2015/75603/top02.jpg?v=1234") no-repeat; height: 177px;}
 8 .top .top03{background:url("http://img1.40017.cn/cn/s/ZhuanTi/2015/75603/top03.jpg?v=1234") no-repeat; height: 176px;}
 9 
10 .content{width: 1200px;margin: 0 auto;background: green;height: 2000px;}
11 
12 .foot{font-family: Arial;clear: both;padding: 20px 0;}
13 
14 .zy{
15     position: fixed;
16     top: 529px;
17     width: 340px;
18     height: 1233px;
19 }
20 
21 .zy_l{
22     left: 0;
23     background: url(http://img1.40017.cn/cn/s/index/2015/wyL.jpg) no-repeat scroll center top;
24 }
25 
26 .zy_r{
27     right: 0;
28     background: url(http://img1.40017.cn/cn/s/index/2015/wyR.jpg) no-repeat scroll center top;
29 }
View Code

----------------css代码-----------------

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
 3 <head>
 4     <title></title>
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6     <meta name="keywords" content="" />
 7     <meta name="description" content="" />
 8 </head>
 9 <script type="text/javascript" src="http://js.40017.cn/cn/min/??/cn/public/fish.1.4.5.js,/cn/public/fc.1.1.6.js?v=082102"></script>
10 <link rel="stylesheet" type="text/css" href="http://css.40017.cn/cn/min/??/cn/c/zt/2013/ztBase.css?v=13080902">
11 <link href="com-11.css" rel="stylesheet" type="text/css" />
12 <body>
13 <!--顶部登录横条 start-->
14 <div class="head">
15     <div class="headCont">
16         <a class="headLogo" href="/" title="同程旅游" target="_blank">
17             <img src="http://img1.40017.cn/cn/new_ui/public/images/logo/16652/zt_Logo.png" alt="同程旅游"/>
18         </a>
19         <div id="zhuantiHeadNew" class="headR">
20             <a id="loginHref" rel="nofollow" onclick="this.href = this.getAttribute('nhref').replace('{backurl}', encodeURIComponent(window.location.href))" nhref="http://passport.ly.com/?pageurl={backurl}" href="http://passport.ly.com/">登录</a>
21             <span class="headR_sp">|</span>
22             <a class="head_register" rel="nofollow" href="http://passport.ly.com/register/index/" onclick="this.href = this.getAttribute('nhref').replace('{backurl}', encodeURIComponent(window.location.href))" nhref="http://passport.ly.com/register/index/?pageurl={backurl}">注册</a>
23         </div>
24     </div>
25 </div>
26 <!--顶部登录横条 end-->
27 <!--专题内容 start-->
28 <div class="both">
29     <div class="top">
30         <div class="top01"></div>
31         <div class="top02"></div>
32         <div class="top03"></div>
33     </div>
34     <div class="content">
35     </div>
36     <div class="foot">
37         <p>
38             Copyright <font>&copy;</font> 2002-2015 同程网络科技股份有限公司 版权所有
39         </p>
40     </div>
41 </div>
42 
43 <script src="com-11.js"></script>
44 </body>
45 </html>
View Code

----------------html代码-------------------

 1 /**
 2  * Created by zy07481 on 2015/4/23.
 3  */
 4 
 5 fish.loaded(function(){
 6     var oDivL=document.createElement("div"),
 7         oDivR=document.createElement("div");
 8     oDivL.className="zy_l zy";
 9     oDivR.className="zy_r zy";
10     fish.dom(".content").appendChild(oDivL);
11     fish.dom(".content").appendChild(oDivR);
12 
13 
14     var scrollFn= function(){
15         var cTop=fish.one(".content").offset().top,
16             wScrollTop=fish.one(window).scrollTop();
17 
18             fish.one("body").css("overflow-x: hidden;");
19 
20         if(wScrollTop<cTop){
21             fish.one(oDivL).css("position:absolute;top:529px;");
22             fish.one(oDivR).css("position:absolute;top:529px;")
23         }else{
24             fish.one(oDivL).css("position:fixed;top:0px;")
25             fish.one(oDivR).css("position:fixed;top:0px;")
26             fish.dom("body").removeAttribute("style");
27         }
28     }
29     scrollFn();
30     fish.one(window).on("scroll",function(){
31         scrollFn();
32     })
33 
34     var resizeFn =function(){
35         var contentW=fish.one(".content").width(),
36             windowW=fish.one(window).width();
37 
38         if(windowW > contentW){
39             fish.one(oDivL).removeClass("none");
40             fish.one(oDivR).removeClass("none");
41 
42             var sDis = (windowW - contentW) / 2 -20,
43                 l = sDis-fish.one(oDivL).width();
44 
45                 fish.one(oDivL).css("left:" + l + "px;");
46                 fish.one(oDivR).css("right:" + l + "px;");
47 
48         }else{
49             fish.one(oDivL).addClass("none");
50             fish.one(oDivR).addClass("none");
51         }
52     }
53     resizeFn();
54     fish.one(window).on("resize",function(){
55         resizeFn();
56     });
57 
58 })
View Code

----------------js代码----------------------

posted @ 2015-05-13 15:00  zhouyan_jsj  Views(119)  Comments(0)  Edit  收藏  举报