zoukankan      html  css  js  c++  java
  • full-background.js

    $(window).on('load', function () {
        $(window).trigger('resize');
    });
    
    $(function () {
      var $window = $(window),
      isLoaded = false;
    
      function resizeBg() {
        var winWidth = $window.width(),
          winHeight = $window.height(),
          viewportAspectRatio = winWidth / winHeight;
    
        $('.full-bg').each(function (index, item) {
          var $bg = $(item),
          bgWidth = $bg.width(),
          bgHeight = $bg.height(),
          aspectRatio = bgWidth / bgHeight;
    
            if (viewportAspectRatio < aspectRatio ) {
              $bg.removeClass('full-width')
                .addClass('full-height')
                .css({
                   top: 0,
                   left: -(winHeight * aspectRatio - winWidth) / 2
                 });
            } else {
              $bg.removeClass('full-height')
                .addClass('full-width')
                .css({
                  top: -(winWidth / aspectRatio - winHeight) / 2,
                  left: 0
                });
            }
        });
      }
      $window.on('resize', resizeBg);
    
      $('.full-bg').on('load', function () {
        $(window).trigger('resize');
      });
    });
    
    enquire.register('screen and (max- 760px)', {
      match: function () {
        $('.responsive-img').each(function () {
          var $img = $(this),
            src = $img.data('mobile-src');
          if (src) {
            $img.attr('src', src).show();
          } else {
            $img.hide();
          }
        });
      },
      unmatch: function () {
        $('.responsive-img').each(function () {
          var $img = $(this),
            src = $img.data('src');
          if (src) {
            $img.attr('src', src).show();
          } else {
            $img.hide();
          }
        });
      }
    });
    
    enquire.register('screen and (min- 761px)', {
      match: function () {
        $('.responsive-img').each(function () {
          var $img = $(this),
            src = $img.data('src');
          if (src) {
            $img.attr('src', src).show();
          } else {
            $img.hide();
          }
        });
      },
      unmatch: function () {
        $('.responsive-img').each(function () {
          var $img = $(this),
            src = $img.data('mobile-src');
          if (src) {
            $img.attr('src', src).show();
          } else {
            $img.hide();
          }
        });
      }
    });
  • 相关阅读:
    Gmail邮件被屏蔽
    每天读两本书的方法
    如何做到一天读一本书?
    给网站加图标
    接口和类的异同
    生气的时候如何不生气
    只有某行文字间距较大
    视频流媒体监控系统EasyDSS是如何在无人机巡查秸秆焚烧中发挥作用的?
    互联网直播点播平台EasyDSS视频直播通道被占用了怎么处理?
    互联网直播点播平台EasyDSS如何实现电梯监控?EasyDSS电梯云物联解决方案介绍
  • 原文地址:https://www.cnblogs.com/Brittany-yan/p/5279242.html
Copyright © 2011-2022 走看看