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从头学起第一讲
Jul 04 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
jquery validation验证表单插件
Jan 07 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
JS实现贪吃蛇游戏
Nov 15 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 dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
python求质数的3种方法
2018/09/28 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
python代码区分大小写吗
2020/06/17 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
总账会计岗位职责
2014/03/13 职场文书
学校安全管理责任书
2014/07/23 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
SQLServer常见数学函数梳理总结
2022/08/05 MySQL