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 相关文章推荐
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
node.js中的console用法总结
Dec 15 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
利用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中的正规表达式(二)
2006/10/09 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
vue页面离开后执行函数的实例
2018/03/13 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
webpack打包多页面的方法
2018/11/30 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
python实现石头剪刀布小游戏
2021/01/20 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
Python使用configparser库读取配置文件
2020/02/22 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
幼儿运动会邀请函
2014/01/17 职场文书
小学毕业感言300字
2014/02/19 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
物理教育专业求职信
2014/06/25 职场文书
2014年内勤工作总结
2014/11/24 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
用Python提取PDF表格的方法
2021/04/11 Python