使用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 相关文章推荐
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
node 文件上传接口的转发的实现
Sep 23 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
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扩展图文教程
2008/12/12 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python Deque 模块使用详解
2014/07/04 Python
python中__call__内置函数用法实例
2015/06/04 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
python中re模块知识点总结
2021/01/17 Python
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
会计与审计毕业生自荐信范文
2013/12/30 职场文书
会计专业自我评价
2014/02/12 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
转学证明范本
2015/06/19 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
Minikube搭建Kubernetes集群
2022/03/31 Servers
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js