使用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 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
永不消失的title提示代码
Feb 15 Javascript
JavaScript-世界上误解最深的语言分析
Aug 12 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 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实现telnet功能示例
2014/04/08 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
python访问系统环境变量的方法
2015/04/29 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
Django websocket原理及功能实现代码
2020/11/14 Python
python3实现简单飞机大战
2020/11/29 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
如何通过jdbc调用存储过程
2012/04/19 面试题
大一自我鉴定范文
2013/12/27 职场文书
大学生党员自我评价范文
2014/04/09 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
九年级语文教学反思
2016/03/03 职场文书