zoukankan      html  css  js  c++  java
  • 自适应屏幕

     1 <div id="center1" class="cen_container">
     2   <div class="center1_bg">
     3     <img src="../css/images/index.jpg">
     4   </div>
     5   <div class="center1-content">
     6     <div class="dataBlock"></div>
     7     <div class="searchBlock"></div>
     8     <div class="callBlock"></div>
     9    </div>
    10 </div>
    1 #center1{ width:100%;min-height:634px !important;position: relative; margin:0 auto;position: relative;}
    2 .center1_bg{width: 100%;height: 100%;background: url("../images/index_1.jpg") center center no-repeat;position: absolute;top: 0;left: 0;z-index: -1;}
    3 .center1_bg img{width: 100%;height:auto;min-width: 1350px;}
    4 .center1-content{width: 990px;height: 100%;margin: 0 auto;position: relative;}
     1 var change_c1 = function(){
     2   var w_height = $(window).height();
     3   var img_r = 1920 /1080;
     4   var window_r = $(window).width() / $(window).height();
     5   if(window_r >= img_r){
     6     $(".center1_bg img").css({
     7       'width' : '100%',
     8       'height' : 'auto'
     9     });
    10   }else{
    11     $(".center1_bg img").css({
    12       'width' : 'auto',
    13       'height' : '100%'
    14     });
    15   }
    16   var cen1_height = (w_height - 80 + 37) >= 600 ? (w_height - 80 + 37) : 600;
    17   $('#center1,.center1_bg').height(cen1_height + 'px');
    18   var resizeTimer = null;
    19   $(window).on('resize', function () {
    20       if (resizeTimer) {
    21         clearTimeout(resizeTimer)
    22       }
    23       resizeTimer = setTimeout(function(){change_c1();}, 200);
    24     }
    25   );
    26 }
  • 相关阅读:
    Codeforces Round #670 (Div. 2)
    BUPT训练随笔(round 5)
    BUPT训练随笔(round 4)
    BUPT训练随笔(round 3)
    BUPT训练随笔(round 2)
    BUPT训练随笔(round 1)
    ctsc&apio2018八日游
    没有标题0.0
    splay:优雅的区间暴力!
    FJOI游记(日记向 不定期更新)
  • 原文地址:https://www.cnblogs.com/jymz/p/3997917.html
Copyright © 2011-2022 走看看