jQuery插件ImageDrawer.js實(shí)現(xiàn)動(dòng)態(tài)繪制圖片動(dòng)畫(huà)（附源碼下載）
ImageDrawer.js是一款可以實(shí)現(xiàn)動(dòng)態(tài)繪制圖片動(dòng)畫(huà)的jQuery插件。通過(guò)ImageDrawer.js插件，你可以制作在頁(yè)面中繪制圖片的動(dòng)態(tài)過(guò)程，你可以控制繪制動(dòng)畫(huà)的持續(xù)時(shí)間等參數(shù)，非常有趣。
使用方法
使用該動(dòng)態(tài)繪制圖片插件需要在頁(yè)面中引入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結(jié)構(gòu)
在頁(yè)面中插入你需要繪制的圖片。
<div id="container"> <img id="example" src="img.jpg"> </div>
初始化插件
在頁(yè)面DOM元素加載完畢之后，可以通過(guò)下面的方法來(lái)初始化該圖片繪制插件。
$('div#container').drawImage();
配置參數(shù)
ImageDrawer.js圖片繪制插件有以下一些可用的配置參數(shù)。
$(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：繪制動(dòng)畫(huà)的持續(xù)時(shí)間?？梢允且粋€(gè)整數(shù)，或是一個(gè)對(duì)象：
{
borderPencil : 9,
pencilShades : 6,
colorShades : 7.5,
fullColors : 7.5
}
borderPencil：繪制邊框需要的時(shí)間。
pencilShades：繪制黑白陰影部分需要的時(shí)間。
colorShades：繪制彩色陰影需要的時(shí)間。
fullColors;填充顏色需要的時(shí)間。
background:畫(huà)布的背景顏色。
callback：回調(diào)函數(shù)。
pencil：在畫(huà)布上方顯示的鉛筆小圖標(biāo)。
以上所述是小編給大家介紹的jQuery插件ImageDrawer.js實(shí)現(xiàn)動(dòng)態(tài)繪制圖片動(dòng)畫(huà)（附源碼下載）的相關(guān)知識(shí)，希望對(duì)大家有所幫助！
- nodejs處理圖片的中間件node-images詳解
- js關(guān)于getImageData跨域問(wèn)題的解決方法
- javascript實(shí)現(xiàn)鼠標(biāo)移到Image上方時(shí)顯示文字效果的方法
- javascript從image轉(zhuǎn)換為base64位編碼的String
- js的image onload事件使用遇到的問(wèn)題
- js中Image對(duì)象以及對(duì)其預(yù)加載處理示例
- 通過(guò)js獲取div的background-image屬性
- JavaScript Image對(duì)象實(shí)現(xiàn)原理實(shí)例解析
相關(guān)文章
JQuery UI有著非常豐富的皮膚，JQuery官方提供的就有十幾套，除了官方提供的之外，JQuery還提供了定制皮膚的服務(wù)2009-07-07
本文給大家分享一段jquery代碼實(shí)現(xiàn)手指滑動(dòng)輪播效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，需要的朋友參考下2016-12-12
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)首頁(yè)懸浮框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
jQuery實(shí)現(xiàn)商品活動(dòng)倒計(jì)時(shí)
這篇文章主要介紹了jQuery實(shí)現(xiàn)商品活動(dòng)倒計(jì)時(shí)，倒計(jì)時(shí)在WEB上應(yīng)用非常廣泛，如考試系統(tǒng)倒計(jì)時(shí)，團(tuán)購(gòu)網(wǎng)站中的優(yōu)惠活動(dòng)倒計(jì)時(shí)等等，感興趣的小伙伴們可以參考一下2015-10-10
在jQuery庫(kù)中，幾乎所有的插件都被限制在它的命名空間里。全局的對(duì)象都很好地存儲(chǔ)在jQuery命名空間里，因此當(dāng)把jQuery和其它javascript類(lèi)庫(kù)一起使用時(shí)，不會(huì)引起沖突.2010-06-06
jquery無(wú)限級(jí)聯(lián)下拉菜單簡(jiǎn)單實(shí)例演示
這篇文章主要向大家推薦了一個(gè)jquery無(wú)限級(jí)聯(lián)下拉菜單簡(jiǎn)單實(shí)例演示，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章與大家分享的是10款非常有用的 Ajax 插件，有用于圖片的，用于分頁(yè)的，還有用于導(dǎo)航的。這些作者的想法特別新穎，希望你能從中找到自己需要的插件2012-03-03
jquery關(guān)于表格及表格列隱藏和顯示問(wèn)題探討
本文為大家詳細(xì)介紹下關(guān)于指定表格及指定列的隱藏或顯示、獲取表格的列數(shù)等等表格相關(guān)的使用技巧，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-06-06
jquery實(shí)現(xiàn)的Accordion折疊面板效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)的Accordion折疊面板效果代碼,通過(guò)jquery鼠標(biāo)click事件操作頁(yè)面元素樣式動(dòng)態(tài)變換實(shí)現(xiàn)手風(fēng)琴折疊效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
JQuery 控制內(nèi)容長(zhǎng)度超出規(guī)定長(zhǎng)度顯示省略號(hào)
這篇文章主要介紹JQuery如何實(shí)現(xiàn)控制內(nèi)容長(zhǎng)度超出規(guī)定長(zhǎng)度顯示省略號(hào),需要的朋友可以參考下2014-05-05