通常網站的布局都不是單一的。例如圖像在電腦、平板和智能手機上可能顯示的形狀是不同的。特別是如果你使用的是全屏圖像，在你必須使用相同的圖像文件的情況下，你的主題可能會被截斷或完全缺失，或者看起來很尷尬。
FocusPoint 這款 jQuery 插件可以確保你的圖像中的任何容器看起來都很棒，它提出了“響應裁剪”的概念，確保你的圖片的重要組成部分被裁剪出來，動態圖像裁剪以填充可用空間又不會裁剪掉圖像的主題部分。
使用方法：
1. 計算圖片的聚焦點
圖像的聚焦點是由X（水平）和Y（垂直）坐標組成。坐標值可以是一個在-1到+1范圍內的任意數字，其中0為中心。 x:-1表示的圖像左邊界，x:1是圖像的右邊界。對於Y軸，y:1是圖像的上邊界，y:1是圖像的下邊界。
困惑了？ Don't worry, 沒關系，在這里有一個方便的腳本，可以獲取圖片的坐標：點擊查看。
2. 在頁面引入 JS 和 CSS
你需要在頁面中引入 jQuery，FocusPoint 腳本和樣式文件：
<link rel="stylesheet" href="focuspoint.css"> <script src="jquery.js"></script> <script src="focuspoint.js"></script>
3. 標記圖片容器
指定的圖像尺寸和圖像容器聚焦點坐標。注：我知道這不是真的應該需要指定的圖像尺寸，但我發現這比從圖像讀取尺寸更可靠。例如：
<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. 調用 FocusPoint 插件
基本的調用，只需要一行代碼：
$('.focuspoint').focusPoint();
目前，可用的配置選項不是很多，但是如果你想在窗口大小變化的時候防止圖像被重新聚焦，可以像這樣：
$('.focuspoint').focusPoint({
reCalcOnWindowResize : false
});
在任何時候，你都可以調用 adjustFocus 來重新聚焦圖像：
$('.focuspoint').adjustFocus()
您可能感興趣的相關文章