HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 应用推荐 HTML5应用 查看内容

仿Ken Burns效果jQuery幻灯片插件

2015-10-19 10:54| 发布者: html5cn| 查看: 1081| 评论: 0|来自: jQuery之家

摘要: 这是一款仿Ken Burns效果的jQuery幻灯片插件。该幻灯片插件是基于smartcrop.js插件的,smartcrop.js是一款用于剪裁图片的js插件。Ken Burns效果是将图片逐渐平移放大的动画效果。 ...

  简要教程

  这是一款仿Ken Burns效果的jQuery幻灯片插件。该幻灯片插件是基于smartcrop.js插件的,smartcrop.js是一款用于剪裁图片的js插件。Ken Burns效果是将图片逐渐平移放大的动画效果。

 

查看演示    下载插件

  使用方法

  什么是Ken Burns效果?

  什么是Ken Burns效果呢?维基网站(wikipedia)给出了下面的定义:

  The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery.

  Ken Burns效果是指将图片局部放大移动的一种动画效果。下面的图片说明了这个动画过程,左边的图片被红线圈住的地方将会平滑的动画过渡到右边的图片。

Ken Burns效果示意图

  smartcrop.js

  这个Ken Burns效果依赖于smartcrop.js。该插件是一款用于裁剪图片的js插件。该插件的使用方法为:

SmartCrop.crop(image, options, callback)  


  image:可以是HTMLImageElement、HTMLCanvasElement或HTMLVideoElement。

  options:配置参数,参考下方的参数描述。

  callback:裁剪图片结束后的回调函数。

 

  options参数:

  debug:如果设置为true,cropResults将包含一个debugCanvas。

  minScale:最小的裁剪矩形区域。

  width:裁剪区域的宽度。

  height:裁剪区域的高度。

 

  例如可以如下使用:

SmartCrop.crop(image, {width: 100, height: 100}, function(result){console.log(result);});               


  更多关于该插件的资料请参考:smartcrop.js

 

  推荐插件:

  带各种百叶窗过渡效果的jQuery幻灯片插件

  多用途响应式jQuery视频和图片画廊插件

 

  来源jQuery之家

更多
1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-2-23 10:33

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部