注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery响应式图片裁剪聚焦插件focuspoint

媒体 fishcity 2093浏览

图片裁剪聚焦focuspoint

focuspoint是一款响应式图片裁剪聚焦的jquery插件,它可使图片随着浏览器的大小变化而始终聚焦在图片某一点,让图片的主题更突出,让视觉更具冲击力。

jquery实例:响应式图片裁剪聚焦插件focuspoint使用方法。

1、计算出图片的聚集位置

图像的焦点是由x(水平)和y坐标(垂直)组成。X和Y的值在十进制数字-1和1之间,其中0是中心。X:-1表示图像的左边,X:1右边,y轴,y:-1是顶部和y:1是底部。如下图

图片聚焦位置

那如何才能准确的定位到想要的焦点位置呢,亲们可以放心,请使点击这里来使用工具。

2、引入核心文件

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

3、创建图片容器

在容器中指定图像的尺寸和聚焦的坐标点。图像会占用容器的所有可用空间,所以需要通过设置CSS来设置容器的高度来达到空间的填补。代码如下

<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({
    reCalcOnWindowResize : false
   });
   
 //你可以配置在改变浏览器窗口大小时图片重置聚焦的频率
 //每100毫秒聚焦一次
$('.focuspoint').focusPoint({
    throttleDuration: 100
});

//禁用调整聚焦
$('.focuspoint').focusPoint({
    throttleDuration: 0
});

5、其它重置

你可以在任何时候使用adjustFocus()重置图像聚焦点。这会重新计算图像应放置在框架的地方。如:你要使用FocusPoint图像在一个滑块中,但如果图像容器是隐藏的,FocusPoint是不能正确的计算的(因为它不会有任何维度),所以你应该在目标容器触发adjustFocus(),把容器变得可见。例子:

$('.focuspoint').adjustFocus()

转载请注明:jQ酷 » jquery响应式图片裁剪聚焦插件focuspoint

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。