关于导航宽度高度自适应的小栗子
1 /* 2 * To change this license header, choose License Headers in Project Properties. 3 * To change this template file, choose Tools | Templates 4 * and open the template in the editor. 5 */ 6 /* 自定义代码 */ 7 function windowResize() { 8 var winW = $(window).width(); 9 var winH = $(window).height(); 10 var bodyH = $('body').height(); 11 12 /* 左侧导航自适应高度 */ 13 if (winH > 600) { 14 if(bodyH > winH) { 15 winH = bodyH; 16 } 17 $("#yunguLeft").animate({ 18 height: winH 19 }, 300); 20 } else { 21 $("#yunguLeft").height(600); 22 } 23 } 24 windowResize(); 25 $(window).resize(function () { 26 windowResize(); 27 }); 28 //左侧导航自适应 29 $("#yunguLeft").bind("click", function () { 30 $("#yunguLeftTc").toggle(); 31 }); 32 33 /* 公告小数字背景色控制 */ 34 $(".gy-body-right .gglist").each(function(){ 35 $(this).find("li:lt(3) font").css('background', "#8dcbc9"); 36 }); 37 38 //切换 39 $(".yungu-left-banner").bind("click",function () { 40 $(".left-left").hide(); 41 $(".yungu-left-banner-tanchu").css('left',0); 42 43 }); 44 $(".yungu-left-banner-tanchu").bind("click",function () { 45 $(".left-left").show(); 46 }); 47 48 49 50 $(".slide-left").bind("click", function (){ 51 if(!$("#lunbo_pic").is(":animated")) { 52 $("#lunbo_pic").stop(false,true).animate({ 53 'marginLeft': parseInt($("#lunbo_pic").css('marginLeft'))-97 54 }, function(){ 55 $("#lunbo_pic li:first").clone().appendTo($("#lunbo_pic")); 56 $("#lunbo_pic li:first").remove(); 57 $("#lunbo_pic").css("marginLeft", 0); 58 }); 59 } 60 }); 61 62 $(".slide-right").bind("click", function (){ 63 if(!$("#lunbo_pic").is(":animated")) { 64 $("#lunbo_pic li:last").clone().prependTo($("#lunbo_pic")); 65 $("#lunbo_pic").css('marginLeft', '-97px'); 66 $("#lunbo_pic").stop(false,true).animate({ 67 'marginLeft': 0 68 }, function(){ 69 $("#lunbo_pic li:last").remove(); 70 $("#lunbo_pic").css("marginLeft", 0); 71 }); 72 } 73 }); 74 75 /* 鼠标放上停止滚动 */ 76 var setTime; 77 78 function setTimeFun() { 79 setTime = setTimeout(function() { 80 $(".slide-left").trigger("click"); 81 setTimeFun(); 82 },2000); 83 } 84 85 $("#pic_carousel").hover(function() { 86 clearTimeout(setTime); 87 }, function(){ 88 setTimeFun(); 89 }); 90 91 setTimeFun();
以上为js代码~html代码~
1 <!DOCTYPE html> 2 <!-- 3 To change this license header, choose License Headers in Project Properties. 4 To change this template file, choose Tools | Templates 5 and open the template in the editor. 6 --> 7 <html> 8 <head> 9 <title>云谷</title> 10 <meta charset="UTF-8"> 11 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 12 <link href="css/public.css" rel="stylesheet" type="text/css"/> 13 <link href="css/main.css" rel="stylesheet" type="text/css"/> 14 <link href="css/yungu.css" rel="stylesheet" type="text/css"/> 15 </head> 16 <body> 17 <!--顶部搜索部分开始--> 18 <div class="yungu-top"> 19 <div class="yungu-top-body"> 20 <div class="yungu-logo"><img src="images/logo.png" alt=""/></div> 21 <div class="yungu-search"> 22 <input type="text" name="keyword" value="" class="search" /> 23 <input type="button" class="searchbutton" /> 24 </div> 25 <div class="yungu-gongneng"> 26 <span class="liuyan"><a href="#"></a></span> 27 <span class="richeng"><a href="#"></a></span> 28 <span class="membercenter"><a href="#"></a></span> 29 <span class="set"><a href="#"></a></span> 30 </div> 31 <div class="clear"></div> 32 </div> 33 </div> 34 <!--顶部搜索部分结束--> 35 36 <!--左侧导航开始--> 37 <div class="yungu-left" id="yunguLeft"> 38 <div class="yungu-left-banner"> 39 <div class="left-left"> 40 <div class="zhankai"></div> 41 <div class="logo"> 42 <img src="images/selflogo.png" alt=""/> 43 <span>毛豆科技</span> 44 </div> 45 <div class="banner-list"> 46 <ul> 47 <li class="shouye"><a href="#"></a></li> 48 <li class="gonggao"><a href="#"></a></li> 49 <li class="paidan"><a href="#"></a></li> 50 <li class="tongzhi"><a href="#"></a></li> 51 <li class="chengyuan"><a href="#"></a></li> 52 </ul> 53 </div> 54 </div> 55 </div> 56 57 <!--左侧弹出层--> 58 <div class="yungu-left-banner-tanchu" id="yunguLeftTc"> 59 <div class="takeback"></div> 60 <div class="logo"> 61 <img src="images/bigselflogo.png" alt=""/> 62 <span>毛豆科技<br/> <font>宁祺超</font></span> 63 </div> 64 <div class="banner-list"> 65 <ul> 66 <li class="shouye"><a href="#">企业首页</a></li> 67 <li class="gonggao"><a href="#">系统公告</a></li> 68 <li class="paidan"><a href="#">任务派单</a></li> 69 <li class="tongzhi"><a href="#">会议通知</a></li> 70 <li class="chengyuan"><a href="#">成员管理</a></li> 71 </ul> 72 </div> 73 </div> 74 </div> 75 <!--左侧导航结束--> 76 77 <!--中间内容开始--> 78 <div class="yungu-content"> 79 80 <!--body内容开始--> 81 <div class="gy-body"> 82 <!-- top start 日期个人留言开始--> 83 <div class="top"> 84 <span class="riqi">05月22号 星期五</span> 85 <span class="pic"><i>在云谷，与您携手共创未来！</i></span> 86 <span class="top_right"> 87 <img src="images/1_32.png"/>毛豆科技(宁祺超)：带你装逼带你飞...... 88 </span> 89 </div> 90 <!--top end 日期个人留言结束--> 91 92 93 <!--body内容--> 94 <div class="gy-body-c"> 95 <!--内容左侧部分开始--> 96 <div class="gy-body-left"> 97 98 <!--top left start 企业列表开始--> 99 <div class="gy-body-left-slide"> 100 <div class="topic"> 101 <h2>云谷企业</h2> 102 <a href="javascript:void(0);">+</a> 103 </div> 104 <div id="pic_carousel" class="lunbo-detail"> 105 <div class="lunbo-detail-limit"> 106 <ul id="lunbo_pic" class="clearfix lunbo_pic"> 107 <li> 108 <a href="#"><img src="images/1_55.jpg" /></a> 109 <span class="companyname">企业名称</span> 110 <a href="#" class="addgz">加关注</a> 111 </li> 112 <li> 113 <a href="#"><img src="images/1_44.jpg" /></a> 114 <span class="companyname">企业名称</span> 115 <a href="#" class="addgz">加关注</a> 116 </li> 117 <li> 118 <a href="#"><img src="images/1_46.jpg" /></a> 119 <span class="companyname">企业名称</span> 120 <a href="#" class="addgz">加关注</a> 121 </li> 122 <li> 123 <a href="#"><img src="images/1_48.jpg" /></a> 124 <span class="companyname">企业名称</span> 125 <a href="#" class="addgz">加关注</a> 126 </li> 127 <li> 128 <a href="#"><img src="images/1_50.jpg" /></a> 129 <span class="companyname">企业名称</span> 130 <a href="#" class="addgz">加关注</a> 131 </li> 132 <li> 133 <a href="#"><img src="images/1_52.jpg" /></a> 134 <span class="companyname">企业名称</span> 135 <a href="#" class="addgz">加关注</a> 136 </li> 137 <li> 138 <a href="#"><img src="images/1_52.jpg" /></a> 139 <span class="companyname">企业名称</span> 140 <a href="#" class="addgz">加关注</a> 141 </li> 142 <li> 143 <a href="#"><img src="images/1_52.jpg" /></a> 144 <span class="companyname">企业名称</span> 145 <a href="#" class="addgz">加关注</a> 146 </li> 147 <li> 148 <a href="#"><img src="images/1_52.jpg" /></a> 149 <span class="companyname">企业名称</span> 150 <a href="#" class="addgz">加关注</a> 151 </li> 152 <li> 153 <a href="#"><img src="images/1_52.jpg" /></a> 154 <span class="companyname">企业名称</span> 155 <a href="#" class="addgz">加关注</a> 156 </li> 157 <li> 158 <a href="#"><img src="images/1_52.jpg" /></a> 159 <span class="companyname">企业名称</span> 160 <a href="#" class="addgz">加关注</a> 161 </li> 162 </ul> 163 </div> 164 <span id="arr_l" class="slide-left"><img src="images/1_62.png"/></span> 165 <span id="arr_r" class="slide-right"><img src="images/1_65.png"></span> 166 </div> 167 </div> 168 <!--企业列表结束--> 169 170 <!--内部交流开始--> 171 <div class="gy-body-left-jl"> 172 173 <div class="jl-title"> 174 <h3 class="jl">内部交流</h3> 175 <span class="xx"><a href="javascript:void(0);">我的消息</a></span> 176 </div> 177 178 <!--嵌入博客--> 179 <div class="addblog"> 180 181 </div> 182 </div> 183 <!--内部交流结束--> 184 </div> 185 <!--内容左侧结束--> 186 187 188 189 <!--内容右侧开始--> 190 <div class="gy-body-right"> 191 <div class="gonggao"> 192 <div class="gg"> 193 <h3 class="ggt">公告</h3> 194 <a href="#">更多</a> 195 </div> 196 <ul class="gglist"> 197 <li><font>1</font><a href="#">毛豆科技关于端午节日放假通知：端午。</a></li> 198 <li><font>2</font><a href="#">毛豆科技6月份启动会议：端午。</a></li> 199 <li><font>3</font><a href="#">热烈欢迎以下小伙伴加入毛豆大家庭：端午。</a></li> 200 <li><font>4</font><a href="#">毛豆科技关于端午节日放假通知：毛豆科技6月份启动会议。</a></li> 201 <li><font>5</font><a href="#">毛豆科技关知毛豆科技6月份启动会议端午。</a></li> 202 <li><font>6</font><a href="#">毛豆科技关知毛豆科技6月份启动会议端午。</a></li> 203 </ul> 204 </div> 205 <div class="huiyi"> 206 <div class="gg"> 207 <h3 class="ggt">会议通知</h3> 208 <a href="#">更多</a> 209 </div> 210 <ul class="gglist"> 211 <li><font>1</font><a href="#">毛豆科技关于端午节日放假通知：端午。</a></li> 212 <li><font>2</font><a href="#">毛豆科技6月份启动会议：端午。</a></li> 213 <li><font>3</font><a href="#">热烈欢迎以下小伙伴加入毛豆大家庭：端午。</a></li> 214 <li><font>4</font><a href="#">毛豆科技关于端午节日放假通知：毛豆科技6月份启动会议。</a></li> 215 <li><font>5</font><a href="#">毛豆科技关知毛豆科技6月份启动会议端午。</a></li> 216 <li><font>6</font><a href="#">毛豆科技关知毛豆科技6月份启动会议端午。</a></li> 217 <li><font>7</font><a href="#">毛豆科技关知毛豆科技6月份启动会议端午。</a></li> 218 <li><font>8</font><a href="#">毛豆科技关知毛豆科技6月份启动会议端午。</a></li> 219 </ul> 220 </div> 221 <!--top right end--> 222 </div> 223 <!--内容右侧结束--> 224 225 <!--清除浮动--> 226 <div class="clear"></div> 227 </div> 228 </div> 229 230 <!-- top end--> 231 </div> 232 <!--中间内容结束--> 233 234 <script src="js/libs/jquery/jquery.min.js" type="text/javascript"></script> 235 <script src="js/yungu.js" type="text/javascript"></script> 236 </body> 237 </html>