Html5添加塊級元素轉換爲不一樣形狀的SVG圖形的jquery插件教程

1、使用方法
使用該SVG圖形jQuery插件要引入jQuery和shapeshifter.js文件。
<script src="jquery.min.js"></script>
<script src="scripts/shapeshifter.js"></script>

2、初始化插件
能夠在任何一個<div>元素上調用該SVG圖形插件。(最好是在<div>元素元素上使用該插件)。
$('SELECTOR').shapeshifter();

3、配置參數
定製SVG圖形,能夠經過shape參數來實現。可用的圖形名稱有:hexagon, star, pentagon, eqTriangle, rectangle, rhombus, heptagon, octogon, nonagon, decagon, leftChevron, rightChevron, message, rTriangleLeft, rTriangleRight。
$('SELECTOR').shapeshifter({shape: "leftChevron"});                

默認的multiplier屬性值爲1,SVG圖形的尺寸爲100x100像素,能夠經過改變這個屬性來修改圖形的尺寸。
$('SELECTOR').shapeshifter({multiplier: 1.5});                

要爲SVG圖形填充顏色可使用fill屬性。該屬性接收任何hex,rgb或標準的CSS顏色值。若是要使用圖片或GIF動態圖片,能夠在fillImage參數中插入圖片的URL地址。
$('SELECTOR').shapeshifter({fill: "#8BC34A"});
$('SELECTOR').shapeshifter({fillImage: "images/ocean.gif"});                

要旋轉SVG圖形可使用rotation參數,傳入的數值以degrees爲單位,要重置SVG圖形中的內容,使它會到0度,能夠設置rotationOffset:true。
$('SELECTOR').shapeshifter({
rotation: 20,
rotationOffset: "true"
});          

KeyMob移動端廣告平臺,爲廣告主提供專業的推廣服務,擁有豐富,穩定,優質的媒體資源。廣告效果好,填充率高。      
jquery

相關文章
相關標籤/搜索