用 jQuery Center Plugin 置中指定的 DOM 元素

一個讓你置中指定 DOM 元素的 jQuery 插件

說明

這個簡單的插件幫助你在視窗中置中你所指定的 DOM 元素. 你也可以傳入數值來指定 y 軸的值. 或是當圖片大於視窗大小的時指定元素的置中方法.

Demo

• 按 這裡 檢視這個 demo
• 原始碼裡也包含了這個 demo 頁面

下載

• 從 Github 下載原始碼

需求

• jQuery 1.2.6+

支援瀏覽器

• Firefox 2.0+
• Internet Explorer 6+
• Safari 3+
• Opera 10.6+
• Chrome 8+

安裝

• 首先, 確定你使用了一個有效的 DOCTYPE
• 引用 JS 檔案

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="path-to-file/jquery.center.js"></script>

選項

against

• 說明: 相對於目標元素的DOM元素
• 資料型別: string
• 預設值: ‘window’
• 可能的值: ‘window’, ‘parent’, or ‘.someTarget’

top

• 說明: 目標元素 css top 的值
• 資料型別: integer
• 預設值: false
• 可能的值: 13, 20, 36 … 可以是任何整數

topPercentage

• 說明: 或是用百分比來表示
• 資料型別: float
• 預設值: 0.5
• 可能的值: 0.1, 0.4, 0.8 …

使用方法

範例程式碼:

讓 #some-element 對 window 置中

  $( '#some-element' ).center();

讓 .some-element against 對父元素置中

  $( '.some-element' ).center({
    against : 'parent',
    top: 10
  });

讓 ‘.some-element’ 對 ‘.some-target-element’ 置中
請注意 ‘.some-target-element’ 必須是 “.some-element” 的父元素支一

  
  $( '.some-element' ).center({
    against : '.some-target-element',
    topPercentage : 0.4
  });

Related posts