使用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来处理图片坏链具体实现步骤
May 02 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 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
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
python sort、sorted高级排序技巧
2014/11/21 Python
Python中max函数用法实例分析
2015/07/17 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
python3 下载网络图片代码实例
2019/08/27 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
社区综治宣传月活动总结
2014/07/02 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
民事申诉状范本
2015/05/20 职场文书
2015年中秋节主持词
2015/07/30 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技