使用 FocusPoint.js 实现图片的响应式裁剪
通常网站的布局都不是单一的。例如图像在电脑、平板和智能手机上可能显示的形状是不同的。特别是如果你使用的是全屏图像,在你必须使用相同的图像文件的情况下,你的主题可能会被截断或完全缺失,或者看起来很尴尬。
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="data:image.jpg" alt="" />
</div>
4. 调用 FocusPoint 插件
基本的调用,只需要一行代码:
$('.focuspoint').focusPoint();
目前,可用的配置选项不是很多,但是如果你想在窗口大小变化的时候防止图像被重新聚焦,可以像这样:
$('.focuspoint').focusPoint({
reCalcOnWindowResize : false
});
在任何时候,你都可以调用 adjustFocus 来重新聚焦图像:
$('.focuspoint').adjustFocus()
本文链接:FocusPoint.js – 实现图片响应式裁剪 jQuery 插件
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
使用 FocusPoint.js 实现图片的响应式裁剪的更多相关文章
- Bootstrap图片支持响应式
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片:响应式图片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Intention.js – 动态重构 HTML 为响应式模式
Intention.js 提供一个轻量级的和明确的方式,帮助你动态重组 HTML,成为响应式的方式.操作方法都放在了元素自己里面,所以灵活的布局看起来就似乎不会那么的抽象和凌乱. 您可以轻松地增加布局 ...
- Strip JS – 低侵入,响应式的 Lightbox 效果
Strip 是一个灯箱效果插件,显示的时候只会覆盖部分的页面,这使得侵扰程度较低,并留出了空间与页面上的大屏幕,同时给予小型移动设备上的经典灯箱体验.Strp JS 基于 jQuery 库实现,支持 ...
- bootstrap 学习笔记(5)---- 图片和响应式工具
(一)响应式图片: 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.其实质是为图片设置了 max-width: 100%;. heig ...
- Pure.css网格系统学习心得——图片的响应式以及应用填充和边框网格单位的学习
今天学习了pure.css可定制的网格系统,pure默认的网格系统是移动先行,如果我们想在小屏幕上有网格只要用pure-u-*就可以了,下面来说一下它的主要用法! <div class=&quo ...
- Vue.js学习 Item12 – 内部响应式原理探究
深入响应式原理 大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图.这让状态管理非常简单且直观,不过理解它的原理也很重 ...
- 【译】用 Chart.js 做漂亮的响应式表单
数据包围着我们.虽然搜索引擎和其他应用都对基于文本方式表示的数据偏爱有加,但人们发现可视化是更容易理解的一种方式.今年初,SitePoint 发表了 Aurelio 的文章< Chart.js简 ...
- 基于cropper.js的图片上传和裁剪
项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求. 功能: 1:点击选择图片,弹出文件夹 ...
随机推荐
- CSS3妙用
scaleX的妙用 案例1 效果: HTML: <a href="javascript:;">我有下划线噢</a> CSS: a{ text-decorat ...
- IEE数据库安装向导
RHEL 5用rpm包,直接安装后配置数据及缓存目录即可. RHEL 6用tar包+配置文件,本文是在RHEL 6上安装IEE的向导. ①上传infobright-4.0.6-x86_64.tar包和 ...
- 漫谈可视化Prefuse(二)---一分钟学会Prefuse
前篇<漫谈可视化Prefuse(一)---从SQL Server数据库读取数据>主要介绍了prefuse如何连接数据库sql server并读取数据进行可视化展现. 回头想想还是应该好好捋 ...
- Apache+MySQL+PHP开发环境的搭建(二)
通过自主选择相应的apache,mysql,php等软件,根据自己的应用开发需求进行安装.此方法搭建的环境自主性较强,搭建过程较为复杂,繁琐. 1.所需软件: Apache: http-2.2.22- ...
- java并发编程(4)--线程池的使用
转载:http://www.cnblogs.com/dolphin0520/p/3932921.html 一. java中的ThreadPoolExecutor类 java.util.concurre ...
- 分享本年度最佳的15个 Photoshop 实例教程
毫无疑问,Photoshop 是任何其类型的设计相关工作的最佳工具.有这么多东西,你可以用它来设计,发挥你的想象力,一切皆有可能. 现在,几乎所有的封面图像都会用 Photoshop 来修饰. 您可能 ...
- [logstash-input-file]插件使用详解
前篇介绍过Logstash的使用,本篇继续深入,介绍下最常用的input插件——file. 这个插件可以从指定的目录或者文件读取内容,输入到管道处理,也算是logstash的核心插件了,大多数的使用场 ...
- .net的垃圾回收机制简述
.如何理解.net中的垃圾回收机制. .NET Framework 的垃圾回收器管理应用程序的内存分配和释放.每次您使用 new 运算符创建对象时,运行库都从托管堆为该对象分配内存.只要托管堆中有地址 ...
- 【Win10开发】关于汉堡菜单-SplitView的用法
SplitView(汉堡菜单)是win10新加的一种控件,顾名思义,其实就是将视图分割成两部分,废话不多说,下面来介绍一下SplitView的基本用法. 首先介绍几个SplitView经常用到的属性. ...
- 算法實例-C#-歸併排序-MergeSort
# 算法实例 # 排序算法Sort 歸併排序MergeSort 算法說明 歸併的思路是任意兩個元素可以比較大小,那麼任意兩個有序的元素集合也可以通過比較大小的方式歸併成一個有序的元素集合 任何的無序元 ...