JQ-动画6
1 @charset "utf-8"; 2 /*=========================Reset_start==========================*/ 3 body,h1,h2,h3,h4,h5,h6,div,p,dl,dt,dd,ol,ul,li,form,table,th,td,a,img,span,strong,var,em,input,textarea,select,option 4 { 5 margin: 0; padding: 0; 6 font-size: 14px; 7 } 8 html,body 9 { 10 font-family:"微软雅黑","宋体",Arail,Tabhoma; 11 text-align: left; 12 } 13 ul,ol 14 { 15 list-style: none; 16 } 17 img 18 { 19 border: 0 none;/*浏览器兼容问题，边框问题*/ 20 } 21 input,select,textarea 22 { 23 outline:0;/*去除外面的实线*/ 24 } 25 textarea 26 { 27 resize:none;/*固定文本框*/ 28 overflow: auto;/*自定义的出现滚动条*/ 29 } 30 table 31 { 32 border-collapse: collapse; 33 border-spacing: 0; 34 } 35 th,strong,var,em 36 { 37 font-weight: normal; 38 font-style: normal; 39 } 40 a 41 { 42 text-decoration: none; 43 } 44 45 /*==========================Reset_End===========================*/
1 html,body{width: 100%;height: 100%;} 2 3 ._indexMain 4 { 5 /*float: right;*/ 6 position: relative; 7 } 8 .z_five_outer,.z_first_outer,.z_second_outer,.z_three_outer,.z_four_outer{ 9 display: none; 10 opacity: 1; 11 } 12 /*第一页*/ 13 .z_first_outer 14 { 15 width:100%; 16 margin: 0 auto; 17 position: absolute; 18 } 19 .z_first 20 { 21 width:100%; 22 text-align: center; 23 overflow: hidden; 24 } 25 ._51dsp 26 { 27 width:100%; 28 height:66px; 29 background: #1f2228; 30 color: #fff; 31 text-align: center; 32 line-height:66px; 33 font-size: 28px; 34 float: left; 35 } 36 ._z_first_dsp 37 { 38 float: left; 39 width:100%; 40 height:100%; 41 text-align: center; 42 min-width:1200px; 43 background-size: 100% 100%; 44 } 45 ._z_first_dsp img 46 { 47 width:100%; 48 height:100%; 49 display: block; 50 } 51 /* 第二页*/ 52 .z_second_outer 53 { 54 width:100%; 55 position: absolute; 56 margin: 0 auto; 57 } 58 .z_second 59 { 60 width:1027px; 61 margin: 80px auto 0px; 62 } 63 .z_second p,.z_three p,.z_four p,.z_five p 64 { 65 width:1027px; 66 line-height:31px; 67 text-align: center; 68 font-size: 24px; 69 color: #e94b59; 70 } 71 .z_second div 72 { 73 margin-top:50px; 74 width:1027px; 75 height:319px; 76 } 77 .z_second div img 78 { 79 width:1027px; 80 height:319px; 81 } 82 /*第三页*/ 83 .z_three_outer 84 { 85 width:100%; 86 position: absolute; 87 margin: 0 auto; 88 } 89 .z_three 90 { 91 width:1027px; 92 margin: 80px auto 0px; 93 overflow: hidden; 94 95 } 96 .z_three_left 97 { 98 width:415px; 99 height:0px; 100 float: left; 101 margin-top:20px; 102 margin-left:85px; 103 margin-right: 5px; 104 } 105 .z_three_center 106 { 107 float: left; 108 width:13px; 109 height:450px; 110 margin-top:20px; 111 position: relative; 112 } 113 #z_three_img1 114 { 115 position: absolute; 116 left: 0; 117 top:0px; 118 height: 0px; 119 } 120 .z_three_right 121 { 122 width:450px; 123 height:0px; 124 float: left; 125 margin-top:20px; 126 } 127 h3 128 { 129 width:415px; 130 height:24px; 131 line-height:24px; 132 text-align: center; 133 font-size: 24px; 134 } 135 .z_three_left_main 136 { 137 width:415px; 138 height:120px; 139 opacity: 1; 140 margin-top:10px; 141 margin-right:0; 142 background:#d9e5ec; 143 } 144 .z_three_left_main img 145 { 146 width:415px; 147 height:120px; 148 display:block; 149 } 150 .z_three_right h3 151 { 152 margin-top:50px; 153 margin-left:5px; 154 } 155 .z_three_right_1 156 { 157 margin-top:10px; 158 margin-left:5px; 159 width:415px; 160 height:120px; 161 background: #f3e1d8; 162 } 163 .z_three_right_1 img 164 { 165 width:415px; 166 height:120px; 167 } 168 /* 第四页*/ 169 .z_four_outer 170 { 171 width:100%; 172 position: absolute; 173 margin: 0 auto; 174 } 175 .z_four 176 { 177 margin: 0 auto; 178 } 179 .z_four p 180 { 181 text-align: center; 182 margin: 80px auto 50px; 183 } 184 .z_four ul 185 { 186 width:1027px; 187 height:220px; 188 overflow: hidden; 189 margin:0 auto; 190 } 191 .z_four ul li 192 { 193 float: left; 194 width:150px; 195 height:60px; 196 margin: 10px; 197 } 198 #z_four_l1 199 { 200 background: url("../images/z_ad_hudu.png") 0px 0px no-repeat; 201 } 202 #z_four_l2 203 { 204 background: url("../images/z_ad_haidao.png") 0px 0px no-repeat; 205 } 206 #z_four_l3 207 { 208 background: url("../images/z_ad_xianlvhu.png") 0px 0px no-repeat; 209 } 210 #z_four_l4 211 { 212 background: url("../images/z_ad_shike.png") 0px 0px no-repeat; 213 } 214 #z_four_l5 215 { 216 background: url("../images/z_ad_pinhan.png") 0px 0px no-repeat; 217 } 218 #z_four_l6 219 { 220 background: url("../images/z_ad_niuhaha.png") 0px 0px no-repeat; 221 } 222 #z_four_l7 223 { 224 background: url("../images/z_ad_jiangnan.png") 0px 0px no-repeat; 225 } 226 #z_four_l8 227 { 228 background: url("../images/z_ad_ren.png") 0px 0px no-repeat; 229 } 230 #z_four_l9 231 { 232 background: url("../images/z_ad_qi.png") 0px 0px no-repeat; 233 } 234 #z_four_l10 235 { 236 background: url("../images/z_ad_dangao.png") 0px 0px no-repeat; 237 } 238 #z_four_l11 239 { 240 background: url("../images/z_ad_san.png") 0px 0px no-repeat; 241 } 242 #z_four_l12 243 { 244 background: url("../images/z_ad_jiuzhou.png") 0px 0px no-repeat; 245 } 246 /* 第五页*/ 247 .z_five_outer 248 { 249 width:100%; 250 margin: 0 auto; 251 } 252 .z_five 253 { 254 width:100%; 255 margin: 0 auto; 256 /*position: relative;*/ 257 } 258 .z_five p 259 { 260 margin: 0 auto; 261 padding-top: 80px; 262 text-align: center; 263 } 264 .z_five_main 265 { 266 width:600px; 267 height:320px; 268 margin: 0 300px 0; 269 } 270 .z_five_main form 271 { 272 font-size: 20px; 273 overflow: hidden; 274 margin-left:55px; 275 } 276 .z_five_main form .z_five_radio 277 { 278 width:20px; 279 height:20px; 280 padding-top:2px; 281 } 282 .z_five_main form input 283 { 284 padding-top:5px; 285 vertical-align: baseline; 286 } 287 .z_five_main form button 288 { 289 background: #ba0013; 290 width:100px; 291 height:30px; 292 line-height:30px; 293 text-align: center; 294 color: #ffffff; 295 border: 0px; 296 margin-left:340px; 297 font-size: 20px; 298 font-weight: bold; 299 } 300 .z_five_tex 301 { 302 border: 0px; 303 border-bottom:1px solid #333; 304 width:220px; 305 } 306 .z_five_foot 307 { 308 position: fixed; 309 left: 103px; 310 bottom: 0; 311 height:83px; 312 background: #ba0013; 313 width:100%; 314 } 315 .z_five_foot h4 316 { 317 height:24px; 318 line-height:24px; 319 width:470px; 320 margin: 0px auto; 321 text-align: center; 322 color: #fff; 323 padding-top: 12px; 324 }
1 /*left*/ 2 .-indexLeft 3 { 4 width: 103px; 5 height:100%; 6 position: fixed; 7 left:0; 8 top:0; 9 background: #041522; 10 z-index: 2; 11 } 12 .-indexLeft-top 13 { 14 width:36px; 15 margin: 20px auto; 16 } 17 .-indexLeft-top span 18 { 19 height:15px; 20 border-top: 1px solid #fff; 21 display: block; 22 } 23 .-indexLeft-nav 24 { 25 width:103px; 26 height:256px; 27 display: none; 28 } 29 .-indexLeft-nav ul 30 { 31 width:103px; 32 height:256px; 33 } 34 .-indexLeft-nav ul li 35 { 36 width:100px; 37 height:40px; 38 border-bottom: 1px dotted #333; 39 text-align: center; 40 line-height:40px; 41 } 42 .-indexLeft-nav ul li a 43 { 44 color: #fff; 45 } 46 .-indexLeft-sideBar 47 { 48 margin: 0 auto; 49 width:68px; 50 height:72px; 51 background: url("../images/z_ad_advance.png") 0 0 no-repeat; 52 } 53 /*foot*/ 54 ._indexFoot 55 { 56 width:100%; 57 height:66px; 58 position: fixed; 59 left: 103px; 60 background: rgba(52, 54, 52, .3); 61 z-index: 2; 62 line-height:66px; 63 overflow: hidden; 64 } 65 ._indexFoot_logo 66 { 67 float: left; 68 width:102px; 69 height:66px; 70 } 71 ._indexFoot_logo img 72 { 73 width:102px; 74 height:66px; 75 display: block; 76 } 77 ._indexFoot_cal 78 { 79 width:180px; 80 height:66px; 81 margin-left:10px; 82 float: left; 83 } 84 ._indexFoot_cal span 85 { 86 display: block; 87 line-height:66px; 88 float: left; 89 color: #ffffff; 90 } 91 ._indexFoot_cal img 92 { 93 display: block; 94 width:30px; 95 height:35px; 96 float: left; 97 margin-top:12px; 98 margin-left:18px; 99 } 100 #_topNav 101 { 102 width:825px; 103 height:66px; 104 float: right; 105 color: #ffffff; 106 position: relative; 107 z-index: 2; 108 } 109 #_topNav li 110 { 111 float: left; 112 width:120px; 113 height:66px; 114 line-height:66px; 115 text-align: center; 116 z-index: 2; 117 position: relative; 118 } 119 #_topNav li a 120 { 121 color: #ffffff; 122 z-index: 2; 123 } 124 #wrap 125 { 126 position: absolute; 127 left: 0; 128 top:0; 129 width:120px; 130 height:66px; 131 background: rgba(52, 54, 52, .4); 132 z-index: 0; 133 border-radius: 10px; 134 }
1 /** 2 3 * 张守华，推广 4 */ 5 $(function () { 6 /*获取每一页的高度*/ 7 var h=document.documentElement.clientHeight||document.body.clientHeight; 8 var w=document.documentElement.clientWidth||document.body.clientWidth; 9 $('._indexMain').css('minWidth','1027px') 10 $('._indexMain').css('marginLeft','103px') 11 $('.z_first_outer').eq(0).height(h); 12 $('.z_first').eq(0).height(h); 13 $('.z_second_outer').eq(0).height(h); 14 $('.z_three_outer').eq(0).height(h); 15 $('.z_four_outer').eq(0).height(h); 16 $('.z_five_outer').eq(0).height(h); 17 $('._indexFoot').eq(0).css({"top":h-66}); 18 $(window).resize(function () {//窗口变化的获取高度 19 var h=window.innerHeight; 20 var w=document.documentElement.clientWidth||document.body.clientWidth; 21 $('.z_first_outer').eq(0).height(h); 22 $('.z_first').eq(0).height(h); 23 $('.z_second_outer').eq(0).height(h); 24 $('.z_three_outer').eq(0).height(h); 25 $('.z_four_outer').eq(0).height(h); 26 $('.z_five_outer').eq(0).height(h); 27 }) 28 /* 左侧菜单栏*/ 29 $('.-indexLeft-top').eq(0).click(function () { 30 $('.-indexLeft-nav').eq(0).slideDown("slow","swing"); 31 }) 32 $('.-indexLeft-top').eq(0).dblclick(function () { 33 $('.-indexLeft-nav').eq(0).slideUp("slow","swing"); 34 }) 35 $('.-indexLeft-sideBar').eq(0).click(function () { 36 $('.-indexLeft-nav').eq(0).slideUp("slow","swing"); 37 }) 38 /* 底部菜单栏内部图层切换*/ 39 $('#_topNav li').hover( 40 function () { 41 var i=$("#_topNav li").index($(this)); 42 var l=$('#_topNav li').eq(1).width(); 43 var w=i*l+"px"; 44 $('#wrap').stop(true,false).animate({"left":w,"top":"0px"}) 45 },function () { 46 $('#wrap').stop(true,false).animate({"left":"0px","top":"0px"}); 47 }) 48 /* 时间获取*/ 49 var date=new Date(); 50 var n=date.getFullYear(); 51 var m=date.getMonth()+1; 52 var d=date.getDate(); 53 $("._indexFoot_cal span").html(n+"年"+m+"月"+d+"日"); 54 /*底部菜单栏上下切换*/ 55 var x=0; 56 $(window).on("mousewheel DOMMouseScroll", function (e) {//JQ滚轮事件兼容 57 var delta =(e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1))|| (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox 58 if (delta > 0) { 59 // 向上滚 60 /*五页大屏切换*/ 61 function up() { 62 x--; 63 if(x<=0){ 64 x=0; 65 $('._indexFoot').stop().animate({"top":h-66},1000); 66 } 67 $('._indexMain').children().eq(x).css("z-index",'1').stop(false,true).fadeIn(500,'swing').siblings().stop().fadeOut(20,'swing'); 68 } 69 up(); 70 71 } else if (delta < 0) { 72 // 向下滚 73 /*五页大屏切换*/ 74 $('._indexFoot').stop().animate({"top":0},1000); 75 function down() { 76 x++; 77 if(x>=4){ 78 x=4; 79 } 80 $('._indexMain').children().eq(x).css("z-index",'1').stop(false,true).fadeIn(500,'swing').siblings().stop().fadeOut(20,'swing'); 81 /*第三页效果*/ 82 if(x==2){ 83 $("#z_three_img1").stop().animate({"height":"404"},3450); 84 $(".z_three_left").stop().animate({"height":"404"},4000); 85 $(".z_three_right").stop().animate({"height":"404"},4000); 86 } 87 /*第四页图片切换效果*/ 88 if (x==3){ 89 $(".z_four_outer li").mouseover(function () { 90 var y=$(".z_four_outer li").index(this); 91 $(".z_four_outer li").eq(y).stop().animate({"backgroundPositionY":"-60"}); 92 }) 93 $(".z_four_outer li").mouseout(function () { 94 var y=$(".z_four_outer li").index(this); 95 $(".z_four_outer li").eq(y).stop().animate({"backgroundPositionY":"0"}); 96 }) 97 } 98 } 99 down(); 100 } 101 }); 102 /*第五页正则*/ 103 var reg0=/^[\u4e00-\u9fa5]{2,4}$/; 104 var reg1=/^[1][358][0-9]{9}$/i; 105 var reg2= /^[a-zA-Z0-9_]{2,10}@[a-z0-9]{2,5}\.[a-z]{2,5}$/i; 106 $(".z_five_main input").eq(0).focus(function () { 107 if(!reg0.test($(".z_five_main input").eq(0).val())) 108 { 109 $(".z_five_main input").eq(0).css({"border":"1px solid red"}) 110 }else{ 111 $(".z_five_main input").eq(0).css({"border":"0px","borderBottom":"1px solid green"}) 112 } 113 }) 114 $(".z_five_main input").eq(0).blur(function () { 115 if(!reg0.test($(".z_five_main input").eq(0).val())) 116 { 117 $(".z_five_main input").eq(0).css({"border":"1px solid red"}) 118 }else{ 119 $(".z_five_main input").eq(0).css({"border":"0px","borderBottom":"1px solid green"}) 120 } 121 }) 122 $(".z_five_main input").eq(1).focus(function () { 123 if(!reg1.test($(".z_five_main input").eq(1).val())) 124 { 125 $(".z_five_main input").eq(1).css({"border":"1px solid red"}) 126 }else{ 127 $(".z_five_main input").eq(1).css({"border":"0px","borderBottom":"1px solid green"}) 128 } 129 }) 130 $(".z_five_main input").eq(1).blur(function () { 131 if(!reg1.test($(".z_five_main input").eq(1).val())) 132 { 133 $(".z_five_main input").eq(1).css({"border":"1px solid red"}) 134 }else{ 135 $(".z_five_main input").eq(1).css({"border":"0px","borderBottom":"1px solid green"}) 136 } 137 }) 138 $(".z_five_main input").eq(2).focus(function () { 139 if(!reg2.test($(".z_five_main input").eq(2).val())) 140 { 141 $(".z_five_main input").eq(2).css({"border":"1px solid red"}) 142 }else{ 143 $(".z_five_main input").eq(2).css({"border":"0px","borderBottom":"1px solid green"}) 144 } 145 }) 146 $(".z_five_main input").eq(2).blur(function () { 147 if(!reg2.test($(".z_five_main input").eq(2).val())) 148 { 149 $(".z_five_main input").eq(2).css({"border":"1px solid red"}) 150 }else{ 151 $(".z_five_main input").eq(2).css({"border":"0px","borderBottom":"1px solid green"}) 152 } 153 }) 154 })
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="pragma" content="no-cache"> 6 <meta name="keywords" content=""> 7 <title>Title</title> 8 <link rel="stylesheet" href="css/reset.css"> 9 <link rel="stylesheet" href="css/z-ad-leftMenu.css"> 10 <link rel="stylesheet" href="css/z_ad_main.css"> 11 </head> 12 <body> 13 <!--左侧菜单栏--> 14 <div class="-indexLeft"> 15 <div class="-indexLeft-top"> 16 <span></span> 17 <span></span> 18 <span></span> 19 </div> 20 <div class="-indexLeft-nav"> 21 <ul> 22 <li> 23 <a href="javacsript:;">51DSP介绍</a> 24 </li> 25 <li> 26 <a href="javacsript:;">视频广告</a> 27 </li> 28 <li> 29 <a href="javacsript:;">移动端广告</a> 30 </li> 31 <li> 32 <a href="javacsript:;">51DSP案例</a> 33 </li> 34 <li> 35 <a href="javacsript:;">关于我们</a> 36 </li> 37 <li> 38 <a href="javacsript:;">联系方式</a> 39 </li> 40 </ul> 41 </div> 42 <div class="-indexLeft-sideBar"> 43 44 </div> 45 </div> 46 <!--底部菜单栏--> 47 <div class="_indexFoot"> 48 <div class="_indexFoot_logo"> 49 <img src="images/z_ad_logo.png" alt=""> 50 </div> 51 <div class="_indexFoot_cal"> 52 <span>2016年9月22日</span> 53 <img src="images/z_ad_calendar.png" alt=""> 54 </div> 55 <ol id="_topNav"> 56 <div id="wrap"></div> 57 <li> 58 <a href="javascript:;">51DSP介绍</a> 59 </li> 60 <li> 61 <a href="javascript:;">视频广告</a> 62 </li> 63 <li> 64 <a href="javascript:;">移动端广告</a> 65 </li> 66 <li> 67 <a href="javascript:;">外包项目</a> 68 </li> 69 <li> 70 <a href="javascript:;">关于我们</a> 71 </li> 72 <li> 73 <a href="javascript:;">联系方式</a> 74 </li> 75 </ol> 76 </div> 77 <!--主体部分--> 78 <div class="_indexMain"> 79 <div class="z_first_outer" style="display: block;"> 80 <div class="z_first"> 81 <div class="_51dsp">51DSP.cn</div> 82 <div class="_z_first_dsp"> 83 <img src="images/z_first.jpg" alt=""> 84 </div> 85 </div> 86 </div> 87 88 <div class="z_second_outer"> 89 <div class="z_second"> 90 <p>服务内容</p> 91 <div> 92 <img src="images/z_second.jpg" alt=""> 93 </div> 94 </div> 95 </div> 96 97 <div class="z_three_outer"> 98 <div class="z_three"> 99 <p>服务流程</p> 100 <div class="z_three_left"> 101 <h3>销售期</h3> 102 <div class="z_three_left_main"> 103 <img src="images/z_ad_three_sell.png" alt=""> 104 </div> 105 <h3 style="margin-top: 60px">售后期</h3> 106 <div class="z_three_left_main"> 107 <img src="images/z_ad_three_shouhou.png" alt=""> 108 </div> 109 </div> 110 <div class="z_three_center"> 111 <img src="images/z_ad_three_center.png" alt="" id="z_three_img1"> 112 </div> 113 <div class="z_three_right"> 114 <h3>执行期</h3> 115 <div class="z_three_right_1"> 116 <img src="images/z_ad_three_zhixing.png" alt=""> 117 </div> 118 <div class="z_three_right_1"> 119 <img src="images/z_ad_three_wancheng.png" alt=""> 120 </div> 121 </div> 122 </div> 123 </div> 124 125 <div class="z_four_outer"> 126 <div class="z_four"> 127 <p>客户案例</p> 128 <ul> 129 <li id="z_four_l1"> 130 </li> 131 <li id="z_four_l2"> 132 </li> 133 <li id="z_four_l3"> 134 </li> 135 <li id="z_four_l4"> 136 </li> 137 <li id="z_four_l5"> 138 </li> 139 <li id="z_four_l6"> 140 </li> 141 <li id="z_four_l7"> 142 </li> 143 <li id="z_four_l8"> 144 </li> 145 <li id="z_four_l9"> 146 </li> 147 <li id="z_four_l10"> 148 </li> 149 <li id="z_four_l11"> 150 </li> 151 <li id="z_four_l12"> 152 </li> 153 </ul> 154 </div> 155 </div> 156 157 <div class="z_five_outer"> 158 <div class="z_five"> 159 <p>咨询服务</p> 160 <div class="z_five_main"> 161 <form action=""> 162 姓 名：<input type="text" value="" class="z_five_tex"><br> 163 联系电话：<input type="text" value="" class="z_five_tex"><br> 164 邮箱地址：<input type="text" value="" class="z_five_tex"><br> 165 广告需求：<br> 166 <input type="radio" value="" name="ad" class="z_five_radio">贴片广告 167 <input type="radio" value="" name="ad" class="z_five_radio">暂停广告 168 <input type="radio" value="" name="ad" class="z_five_radio">移动端广告<br> 169 <input type="radio" value="" name="ad" class="z_five_radio">其他 170 <input type="text" value=""><br> 171 预计花费：<br> 172 <input type="radio" name="money" class="z_five_radio"> 5万以内 173 <input type="radio" name="money" class="z_five_radio"> 5~30万 174 <input type="radio" name="money" class="z_five_radio"> 30~100万 175 <input type="radio" name="money" class="z_five_radio"> 100万以上<br> 176 留言备注：<br> 177 <textarea name="" id="" cols="60" rows="3" style="text-indent: 2em;white-space: normal"></textarea> 178 <button>提交</button> 179 </form> 180 </div> 181 <div class="z_five_foot"> 182 <h4>京ICP备090t83201号 京ICP证070419号 京公网安备:11010502026763</h4> 183 <h4>Copyright©2015 51dsp.com All Rights Reserved</h4> 184 </div> 185 </div> 186 </div> 187 </div> 188 <!--JS--> 189 <script src="js/jquery-1.8.3.min.js"></script> 190 <script src="js/leftandfoot.js"></script> 191 </body> 192 </html>
