使用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 相关文章推荐
一款JavaScript压缩工具:X2JSCompactor
Jun 13 Javascript
jQuery textarea的长度进行验证
May 06 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
微信小程序人脸识别功能代码实例
May 07 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
纯JS实现五子棋游戏
May 28 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
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
jquery处理json数据实例分析
2014/06/03 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
python计算auc指标实例
2017/07/13 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
Python3多线程基础知识点
2019/02/19 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
abstract是什么意思
2012/02/12 面试题
事业单位个人应聘自荐信
2013/09/21 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
元旦活动感言
2014/03/08 职场文书
实习指导老师评语
2014/04/26 职场文书
工商管理专业自荐信
2014/06/03 职场文书
大学生毕业求职信
2014/06/12 职场文书
八一建军节演讲稿
2014/09/10 职场文书
专业技术职务聘任证明
2015/03/02 职场文书