使用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 容错处理代码, 屏蔽错误信息
Mar 09 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
AngularJS学习第一篇 AngularJS基础知识
Feb 13 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
Three.JS实现三维场景
Dec 30 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
Vue学习之常用指令实例详解
Jan 06 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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
Session保存到数据库的php类分享
2011/10/24 PHP
jquery tab插件制作实现代码
2010/06/22 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
js实现微博发布小功能
2017/01/12 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
共产党员承诺书
2014/03/25 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
可可西里观后感
2015/06/08 职场文书
公司员工培训管理制度
2015/08/04 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python
Redis高并发缓存架构性能优化
2022/05/15 Redis