使用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插件开发基础简单介绍
Jan 07 Javascript
如何编写高质量JS代码(续)
Feb 25 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 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执行速度全攻略(上)
2006/10/09 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
php验证码实现代码(3种)
2015/09/07 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
PDO::setAttribute讲解
2019/01/29 PHP
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
django 外键model的互相读取方法
2018/12/15 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
高中毕业自我鉴定
2013/12/13 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
委托书怎么写
2014/07/31 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
pandas取dataframe特定行列的实现方法
2021/05/24 Python
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
python使用BeautifulSoup 解析HTML
2022/04/24 Python
Django框架之路由用法
2022/06/10 Python
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript