浙江 杭州

将块级元素转换为不同形状的SVG图形的jQuery插件

系统分类: 网页特效 - html5 2016-11-30

人气5368

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


shapeshifter是一款可以将块级元素转换为不同形状的SVG图形的jQuery插件。该jQuery插件内置了15种SVG图形,可以将任何div等块级元素转换为这些图形形状。该jQuery插件的特点有:

  • 15种内置SVG图形:六角形,星形,五边形,等边三角形,长方形,八角形,九边形,十边形,左向臂章标记,右向臂章标记,消息框,左向直角三角形和右向直角三角形。
  • 可以旋转SVG图形。
  • 支持图像和颜色填充。

使用方法

使用该SVG图形jQuery插件要引入jQuery和shapeshifter.js文件。

<script src="jquery.min.js"></script>
<script src="scripts/shapeshifter.js"></script>              
              
初始化插件

可以在任何一个<div>元素上调用该SVG图形插件。(最好是在<div>元素元素上使用该插件)。

$('SELECTOR').shapeshifter();                
              

配置参数

要定制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"
});           
              

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:1.94M

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2079.html 非特殊说明,本文版权归原作者所有,转载请注明出处
将块级元素转换为不同形状的SVG图形的jQuery插件

我当前G币余额:0 已下载次数:0

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

 
标签 svg html5 svg 

评论功能关闭...(已有0 评论)