使用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 相关文章推荐
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 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中使用gettext来支持多语言的方法
2011/05/02 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
判断脚本加载是否完成的方法
2009/05/26 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python实现定制交互式命令行的方法
2014/07/03 Python
Python实现类继承实例
2014/07/04 Python
pyhton列表转换为数组的实例
2018/04/04 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
永不妥协观后感
2015/06/10 职场文书
医院见习总结
2015/06/24 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle