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 }
----------------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>©</font> 2002-2015 同程网络科技股份有限公司 版权所有 39 </p> 40 </div> 41 </div> 42 43 <script src="com-11.js"></script> 44 </body> 45 </html>
----------------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 })
----------------js代码----------------------