关于导航宽度高度自适应的小栗子

阳光穿透心脏的1/2处 2023-08-17 17:19 81阅读 0赞 
  1. 1 /* 
  2.  2  * To change this license header, choose License Headers in Project Properties.
  3.  3  * To change this template file, choose Tools | Templates
  4.  4  * and open the template in the editor.
  5.  5  */
  6.  6 /* 自定义代码 */
  7.  7 function windowResize() {
  8.  8     var winW = $(window).width();
  9.  9     var winH = $(window).height();
  10. 10     var bodyH = $('body').height();
  11. 11 
  12. 12     /* 左侧导航自适应高度 */
  13. 13     if (winH > 600) {
  14. 14         if(bodyH > winH) {
  15. 15             winH = bodyH;
  16. 16         }
  17. 17         $("#yunguLeft").animate({
  18. 18             height: winH
  19. 19         }, 300);
  20. 20     } else {
  21. 21         $("#yunguLeft").height(600);
  22. 22     }
  23. 23 }
  24. 24 windowResize();
  25. 25 $(window).resize(function () {
  26. 26     windowResize();
  27. 27 });
  28. 28 //左侧导航自适应
  29. 29 $("#yunguLeft").bind("click", function () {
  30. 30     $("#yunguLeftTc").toggle();
  31. 31 });
  32. 32 
  33. 33 /* 公告小数字背景色控制 */
  34. 34 $(".gy-body-right .gglist").each(function(){
  35. 35     $(this).find("li:lt(3) font").css('background', "#8dcbc9");
  36. 36 });
  37. 37 
  38. 38 //切换
  39. 39 $(".yungu-left-banner").bind("click",function () {
  40. 40     $(".left-left").hide();
  41. 41     $(".yungu-left-banner-tanchu").css('left',0);
  42. 42 
  43. 43 });
  44. 44 $(".yungu-left-banner-tanchu").bind("click",function () {
  45. 45     $(".left-left").show();
  46. 46 });
  47. 47 
  48. 48 
  49. 49 
  50. 50 $(".slide-left").bind("click", function (){
  51. 51     if(!$("#lunbo_pic").is(":animated")) {
  52. 52         $("#lunbo_pic").stop(false,true).animate({
  53. 53             'marginLeft': parseInt($("#lunbo_pic").css('marginLeft'))-97
  54. 54         }, function(){
  55. 55             $("#lunbo_pic li:first").clone().appendTo($("#lunbo_pic"));
  56. 56             $("#lunbo_pic li:first").remove();
  57. 57             $("#lunbo_pic").css("marginLeft", 0);
  58. 58         });
  59. 59     }
  60. 60 });
  61. 61 
  62. 62 $(".slide-right").bind("click", function (){
  63. 63     if(!$("#lunbo_pic").is(":animated")) {
  64. 64         $("#lunbo_pic li:last").clone().prependTo($("#lunbo_pic"));
  65. 65         $("#lunbo_pic").css('marginLeft', '-97px');
  66. 66         $("#lunbo_pic").stop(false,true).animate({
  67. 67             'marginLeft': 0
  68. 68         }, function(){
  69. 69             $("#lunbo_pic li:last").remove();
  70. 70             $("#lunbo_pic").css("marginLeft", 0);
  71. 71         });
  72. 72     }
  73. 73 });
  74. 74 
  75. 75 /* 鼠标放上停止滚动 */
  76. 76 var setTime;
  77. 77 
  78. 78 function setTimeFun() {
  79. 79     setTime = setTimeout(function() {
  80. 80         $(".slide-left").trigger("click");
  81. 81         setTimeFun();
  82. 82     },2000);
  83. 83 }
  84. 84 
  85. 85 $("#pic_carousel").hover(function() {
  86. 86     clearTimeout(setTime);
  87. 87 }, function(){
  88. 88     setTimeFun();
  89. 89 });
  90. 90 
  91. 91 setTimeFun();

以上为js代码~html代码~

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

转载于:https://www.cnblogs.com/s-z-y/p/4544451.html

发表评论

表情：
评论列表 （有 0 条评论，81人围观）

还没有评论，来说两句吧...

相关阅读

    相关 H5图片高度根据宽度自适应

    每个图片原始宽高不一样，缩小每个图片到指定的宽度，高度等比例缩小，实现图片高度自适应。 下面看看实现代码： 下面是uniapp的条件编译，如果是小程序场景就使用 mode

    女爷i女爷i/ 0 赞/ 462 阅读