通常網(wǎng)站的布局都不是單一的。例如圖像在電腦、平板和智能手機(jī)上可能顯示的形狀是不同的。特別是如果你使用的是全屏圖像，在你必須使用相同的圖像文件的情況下，你的主題可能會被截斷或完全缺失，或者看起來很尷尬。

　　FocusPoint 這款 jQuery 插件可以確保你的圖像中的任何容器看起來都很棒，它提出了“響應(yīng)裁剪”的概念，確保你的圖片的重要組成部分被裁剪出來，動態(tài)圖像裁剪以填充可用空間又不會裁剪掉圖像的主題部分。

效果演示      源碼下載

使用方法：

1. 計算圖片的聚焦點(diǎn)

圖像的聚焦點(diǎn)是由X（水平）和Y（垂直）坐標(biāo)組成。坐標(biāo)值可以是一個在-1到+1范圍內(nèi)的任意數(shù)字，其中0為中心。 x:-1表示的圖像左邊界，x:1是圖像的右邊界。對于Y軸，y:1是圖像的上邊界，y:1是圖像的下邊界。

困惑了？ Don't worry, 沒關(guān)系，在這里有一個方便的腳本，可以獲取圖片的坐標(biāo)：點(diǎn)擊查看。

2. 在頁面引入 JS 和 CSS

你需要在頁面中引入 jQuery，F(xiàn)ocusPoint 腳本和樣式文件：

<link rel="stylesheet" href="focuspoint.css">
<script src="jquery.js"></script>
<script src="focuspoint.js"></script>

3. 標(biāo)記圖片容器

指定的圖像尺寸和圖像容器聚焦點(diǎn)坐標(biāo)。注：我知道這不是真的應(yīng)該需要指定的圖像尺寸，但我發(fā)現(xiàn)這比從圖像讀取尺寸更可靠。例如：

<div class="focuspoint"
data-focus-x="0.331"
data-focus-y="-0.224"
data-image-w="400"
data-image-h="300">
    <img src="image.jpg" alt="" />
</div>

4. 調(diào)用 FocusPoint 插件

基本的調(diào)用，只需要一行代碼：

$('.focuspoint').focusPoint();

目前，可用的配置選項不是很多，但是如果你想在窗口大小變化的時候防止圖像被重新聚焦，可以像這樣：

$('.focuspoint').focusPoint({
    reCalcOnWindowResize : false
});

在任何時候，你都可以調(diào)用 adjustFocus 來重新聚焦圖像：

$('.focuspoint').adjustFocus()

效果演示      GitHub主頁

本文鏈接：FocusPoint.js – 實(shí)現(xiàn)圖片響應(yīng)式裁剪 jQuery 插件

編譯來源：夢想天空 ◆ 關(guān)注前端開發(fā)技術(shù) ◆ 分享網(wǎng)頁設(shè)計資源