使用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 相关文章推荐
JS创建类和对象的两种不同方式
Aug 08 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
javascript中FOREACH数组方法使用示例
Mar 01 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 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
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
python生成n个元素的全组合方法
2018/11/13 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
python用match()函数爬数据方法详解
2019/07/23 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
Ajax和javascript的区别
2013/07/20 面试题
大学生思想汇报范文
2013/12/31 职场文书
学校花圃的标语
2014/06/18 职场文书
广告学专业求职信
2014/06/19 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python