OA-imgLiquid

說明

垂直

水平

其他

關於

1. 這是一個前端 jQuery extend function，主要架構於 jQuery。

2. 圖解

3. 加入 jquery.js

  <script src="jquery-1.10.2.min.js" language="javascript" type="text/javascript" /></script>

4. 加入 oa-imgLiquid.js

  <script src="oa-imgLiquid.js" language="javascript" type="text/javascript" /></script>

5. 元素結構

  <div class='oa-imgLiquid'>
    <img sec='demo.jpg' />
  </div>

6. 元素 css 樣式

- 父層 position 一定要是 position 或 absolute。

- 父層一定要有設定 width 或 height。

  <style>
    .oa-imgLiquid {
      position: relative;
      // or
      position: absolute;

      width: 360px;
      height: 180px;
    }
  </style>

7. Javascript

  $('.oa-imgLiquid').OAimgLiquid ();

垂直置中

  <div class='oa-imgLiquid'>
    <img sec='demo.jpg' />
  </div>

  <style>
    .oa-imgLiquid {
      position: relative;
      width: 360px;
      height: 100px;
    }
  </style>

  $('.oa-imgLiquid').OAtab ();

  // or

  $('.oa-imgLiquid').OAtab ({
    position: '='
  });

  // or

  $('.oa-imgLiquid').OAtab ({
    position: '50%'
  });

垂直置頂

  <div class='oa-imgLiquid'>
    <img sec='demo.jpg' />
  </div>

  <style>
    .oa-imgLiquid {
      position: relative;
      width: 360px;
      height: 100px;
    }
  </style>

  $('.oa-imgLiquid').OAtab ({
    position: '-'
  });

  // or

  $('.oa-imgLiquid').OAtab ({
    position: '0%'
  });

  // or

  $('.oa-imgLiquid').OAtab ({
    position: '0' // or '0px'
  });

垂直置底

  <div class='oa-imgLiquid'>
    <img sec='demo.jpg' />
  </div>

  <style>
    .oa-imgLiquid {
      position: relative;
      width: 360px;
      height: 100px;
    }
  </style>

  $('.oa-imgLiquid').OAtab ({
    position: '+'
  });

  // or

  $('.oa-imgLiquid').OAtab ({
    position: '100%'
  });

指定位置

  <div class='oa-imgLiquid'>
    <img sec='demo.jpg' />
  </div>

  <style>
    .oa-imgLiquid {
      position: relative;
      width: 360px;
      height: 100px;
    }
  </style>

  $('.oa-imgLiquid').OAtab ({
    position: '20px'
  });

  // or

  $('.oa-imgLiquid').OAtab ({
    position: '20%'
  });

水平置中

  <div class='oa-imgLiquid'>
    <img sec='demo.jpg' />
  </div>

  <style>
    .oa-imgLiquid {
      position: relative;
      width: 100px;
      height: 300px;
    }
  </style>

  $('.oa-imgLiquid').OAtab ();

  // or

  $('.oa-imgLiquid').OAtab ({
    position: '='
  });

  // or

  $('.oa-imgLiquid').OAtab ({
    position: '50%'
  });

水平置左

  <div class='oa-imgLiquid'>
    <img sec='demo.jpg' />
  </div>

  <style>
    .oa-imgLiquid {
      position: relative;
      width: 100px;
      height: 300px;
    }
  </style>

  $('.oa-imgLiquid').OAtab ({
    position: '-'
  });

  // or

  $('.oa-imgLiquid').OAtab ({
    position: '0%'
  });

  // or

  $('.oa-imgLiquid').OAtab ({
    position: '0' // or '0px'
  });

水平置右

  <div class='oa-imgLiquid'>
    <img sec='demo.jpg' />
  </div>

  <style>
    .oa-imgLiquid {
      position: relative;
      width: 100px;
      height: 300px;
    }
  </style>

  $('.oa-imgLiquid').OAtab ({
    position: '+'
  });

  // or

  $('.oa-imgLiquid').OAtab ({
    position: '100%'
  });

指定位置

  <div class='oa-imgLiquid'>
    <img sec='demo.jpg' />
  </div>

  <style>
    .oa-imgLiquid {
      position: relative;
      width: 100px;
      height: 300px;
    }
  </style>

  $('.oa-imgLiquid').OAtab ({
    position: '30px'
  });

  // or

  $('.oa-imgLiquid').OAtab ({
    position: '30%'
  });

範圍限制

  <div class='oa-imgLiquid'>
    <img sec='demo.jpg' />
  </div>

  <style>
    .oa-imgLiquid {
      position: relative;
      width: 300px;
      height: 100px;
    }
  </style>

  $('.oa-imgLiquid').OAtab ({
    overflow: true,
    position: '-30px'
  });

使用結構 data-position、data-overflow

  <div class='oa-imgLiquid' data-position='-30px' data-overflow='true'>
    <img sec='demo.jpg' />
  </div>

  <style>
    .oa-imgLiquid {
      position: relative;
      width: 100px;
      height: 300px;
    }
  </style>

  $('.oa-imgLiquid').OAtab ();

作者名稱

OA Wu

E-mail

comdan66@gmail.com

作品名稱

OA-imgLiquid