使用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 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
初探js和简单隐藏效果的实例
Nov 23 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
小程序关于请求同步的总结
May 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的in_array低性能问题
2013/09/17 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
浅谈Javascript线程及定时机制
2015/07/02 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
详谈js模块化规范
2017/07/07 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
node中间层实现文件上传功能
2018/06/11 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
Python中的闭包详细介绍和实例
2014/11/21 Python
Python的装饰器使用详解
2017/06/26 Python
pandas重新生成索引的方法
2018/11/06 Python
Django 反向生成url实例详解
2019/07/30 Python
python检测服务器端口代码实例
2019/08/31 Python
如何利用python进行时间序列分析
2020/08/04 Python
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
安全标准化实施方案
2014/02/20 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
深入理解Vue的数据响应式
2021/05/15 Vue.js
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android