使用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控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
JS实现放烟花效果
Mar 10 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
JS call()及apply()方法使用实例汇总
Jul 11 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 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中PDO的事务处理分析
2016/04/07 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python自带的http模块详解
2016/11/06 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
泰国网上购物:Shopee泰国
2018/09/14 全球购物
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
平面设计师的工作职责
2013/11/21 职场文书
九年级政治教学反思
2014/02/06 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
感谢信的格式
2015/01/21 职场文书
详解非极大值抑制算法之Python实现
2021/06/28 Python
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫