使用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 19 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
微信小程序文章列表功能完整实例
Jun 03 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如何编写易读的代码
2007/07/10 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
python简单文本处理的方法
2015/07/10 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
pytorch进行上采样的种类实例
2020/02/18 Python
python3.4中清屏的处理方法
2020/07/06 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
部门年终奖分配方案
2014/05/07 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
朋友聚会开场白
2015/06/01 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
Apache POI的基本使用详解
2021/11/07 Servers