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

阳光穿透心脏的1/2处 2023-08-17 17:19 20阅读 0赞

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 
      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             
     81             <div class="gy-body">
     82                 
     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                 
     91 
     92 
     93                 
     94                 <div class="gy-body-c">
     95                     
     96                     <div class="gy-body-left">
     97 
     98                         
     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                         
    222                     </div>
    223                     
    224 
    225                     
    226                     <div class="clear"></div>
    227                 </div>
    228             </div>
    229 
    230             
    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>

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