jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)


Posted in Javascript onFebruary 25, 2016

ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件。通过ImageDrawer.js插件,你可以制作在页面中绘制图片的动态过程,你可以控制绘制动画的持续时间等参数,非常有趣。

jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)

效果展示       源码下载

使用方法

使用该动态绘制图片插件需要在页面中引入imagedrawer.css,jquery和imagedrawer.js文件。

<link rel="stylesheet" href="css/imagedrawer.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/imagedrawer.js"></script>

HTML结构

在页面中插入你需要绘制的图片。

<div id="container">
<img id="example" src="img.jpg">
</div>

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该图片绘制插件。

$('div#container').drawImage();

配置参数

ImageDrawer.js图片绘制插件有以下一些可用的配置参数。

$(div#container).drawImge({
duration: 20, @number - seconds it's take to draw the entire picture
Instead of specifying the duration on the whole animation,
|| { it's also possible to set the duration of single drawing phases:
borderPencil : 9, @number - seconds it's take to draw the picture by using only the pencil for borders
pencilShades : 6, @number - seconds it's take to draw sharpest shades with black pencil
colorShades : 7.5, @number - seconds it's take to draw first, basic, vanish colors
fullColors : 7.5 @number - seconds it's take to define better all colors on the picture
},
background: '#949494', @string - background color for image while it's been drawing
callback: fn(), @function - function to execute after the last phase
pencil: {
height: '50px',
width : '50px',
src : './img/pencil.png' @string - path to the pencil image
}
});

duration:绘制动画的持续时间。可以是一个整数,或是一个对象:

{
borderPencil : 9, 
pencilShades : 6, 
colorShades : 7.5, 
fullColors : 7.5 
}

borderPencil:绘制边框需要的时间。
pencilShades:绘制黑白阴影部分需要的时间。
colorShades:绘制彩色阴影需要的时间。
fullColors;填充颜色需要的时间。
background:画布的背景颜色。

callback:回调函数。

pencil:在画布上方显示的铅笔小图标。

以上所述是小编给大家介绍的jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
MooTools 1.2介绍
Sep 14 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
基于Vue实现timepicker
Apr 25 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 Javascript
vue打包时去掉所有的console.log
Apr 10 Vue.js
利用jQuery中的ajax分页实现代码
Feb 25 #Javascript
Jquery zTree 树控件异步加载操作
Feb 25 #Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 #Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 #Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 #Javascript
jquery zTree异步加载简单实例讲解
Feb 25 #Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 #Javascript
You might like
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
python学习教程之使用py2exe打包
2017/09/24 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
python实现多层感知器
2019/01/18 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
python os模块在系统管理中的应用
2020/06/22 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
教师求职推荐信范文
2013/11/20 职场文书
同事打架检讨书
2014/02/04 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
怎样写离婚协议书
2014/09/10 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
长城导游词400字
2015/01/30 职场文书
整改通知书
2015/04/20 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python