使用Sticker.js实现贴纸效果


Posted in Javascript onJanuary 28, 2015

Sticker.js 是一个很小的 JavaScript 库,它允许您在网页中创建漂亮的贴纸效果。没有依赖关系(不需要 jQuery),可以在大多数支持 CSS3 的主流浏览器工作。下面有简单的使用示例,更多功能等着你去发现。

使用Sticker.js实现贴纸效果

使用示例:

HTML: 

<!-- dom elements -->

<div class="sticker example-1"></div>

<div class="sticker example-2"></div>

CSS:

.sticker {

width: 180px;

height: 180px;

}

// add image

.example-1 .sticker-img {

background-image: url(heroes-2.png);

}

// add color

.example-2 .sticker-img {

background-color: #ff4a85;

}

// change shadow opacity

.example-2 .sticker-shadow {

opacity: 0.6;

}

JavaScript: 

<!-- call sticker js -->

Sticker.init('.sticker');

立即下载   在线演示

Javascript 相关文章推荐
基于JQuery的cookie插件
Apr 07 Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
js实现拖拽与碰撞检测
Sep 18 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 #Javascript
7个让JavaScript变得更好的注意事项
Jan 28 #Javascript
简单谈谈javascript代码复用模式
Jan 28 #Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 #Javascript
扒一扒JavaScript 预解释
Jan 28 #Javascript
javascript弹出页面回传值的方法
Jan 28 #Javascript
JS获得选取checkbox整行数据的方法
Jan 28 #Javascript
You might like
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
php利用反射实现插件机制的方法
2015/03/14 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
javascript几个易错点记录
2014/11/26 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
python中scikit-learn机器代码实例
2018/08/05 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
大四学生毕业自荐信
2013/11/07 职场文书
行政总监岗位职责
2013/12/05 职场文书
优秀党员获奖感言
2014/02/18 职场文书
党员岗位承诺书
2014/03/25 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书