Sticker.js – 帮助你在网站中加入贴纸效果
Sticker.js 是一个很小的 JavaScript 库,它允许您在网页中创建漂亮的贴纸效果。没有依赖关系(不需要 jQuery),可以在大多数支持 CSS3 的主流浏览器工作。下面有简单的使用示例,更多功能等着你去发现。

使用示例:
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');
本文链接:Sticker.js – 帮助你在网站中加入贴纸效果
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
Sticker.js – 帮助你在网站中加入贴纸效果的更多相关文章
- Sticker.js生成图片或者页面元素“速干贴”效果
在线演示 本地下载 真实的效果,真的非常好玩!
- RulersGuides.js – 网站中实现 Photoshop 标尺效果
RulersGuides.js 是一个 JavaScript 库,在网页上添加类似 Photoshop 中的标尺和辅助网格线.要创建创建网格线线,请单击垂直或水平的标尺,然后推动就可以.还可以使用相应 ...
- [译]MVC网站教程(四):MVC4网站中集成jqGrid表格插件(系列完结)
目录 1. 介绍 2. 软件环境 3. 在运行示例代码之前(源代码 + 示例登陆帐号) 4. jqGrid和AJAX 5. GridSettings 6. ...
- 通过a标签在页面上显示视频网站中的视频
1.把视频传到优酷.腾讯等视频网站中 <!DOCTYPE html> <html> <head lang="en"> <meta char ...
- 将w3cplus网站中的文章页面提取并导出为pdf文档
最近在看一些关于CSS3方面的知识,主要是平时看到网页中有很多用CSS3实现的很炫的效果,所以就打算系统的学习一下.在网上找到很多的文章,但都没有一个好的整理性,比较凌乱.昨天看到w3cplus网站中 ...
- TogetherJS – 酷!在网站中添加在线实时协作功能
TogetherJS是一个免费.开源的 JavaScript 库,来自 Mozilla 实验室,可以实现基于 Web 的在线协作功能.把 TogetherJS 添加到您的网站中,您的用户可以在实时的互 ...
- 通过JS语句判断WEB网站的访问端是电脑还是手机
通过JS语句判断WEB网站的访问端是电脑还是手机,以显示不同的页面! 目录腾讯网的适配代码如何判断访问网站的机器类型-如何判断ipadJS 判断浏览器客户端类型(ipad,iphone,android ...
- 如何通过图片在 HTTPS 网站中获取 HTTP 接口数据
<script> (function() { var Decode=function(b){var e;e=[];var a=b.width,c=b.height,d=document.c ...
- 【前端】向blog或网站中添加语法高亮显示代码方法总结
向blog或网站中添加语法高亮显示的代码方法总结 文章目录 预备知识 目标 第一类方法:嵌入 第二类方法:外部引用 第三类方法:忽略HTML和PHP 最近在写代码时遇到一个问题,就是如何让代码像在ID ...
随机推荐
- javascript学习笔记(四):事件处理函数和动态创建html标记。
1 HTML的事件属性 全局事件属性:HTML 4 增加了使事件在浏览器中触发动作的能力,比如当用户点击元素时启动 JavaScript. a. Window 事件属性,针对 window 对象触发 ...
- JAVA 设计模式 观察者模式
用途 观察者模式 (Observer) 观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象. 这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够自动更新自己. 观 ...
- Theano入门神经网络(一)
Theano是一个Python库,专门用于定义.优化.求值数学表达式,效率高,适用于多维数组.特别适合做机器学习.一般来说,使用时需要安装python和numpy. 首先回顾一下机器学习的东西,定义一 ...
- Asp.net 高性能 Sqlite ORM 框架之 sqliteSugar
一.介简 easyliter框架的升级版本,并且正式命名为SqliteSugar框架,另外Sugar系列还有 MySql和MsSql版本,Oracle版本待开发中(因为客户端太大一直在忧郁当中) 用S ...
- CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins
前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...
- 从零开始学习jQuery (二) 万能的选择器
本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...
- SQL 聚合函数
SQL聚合函数 MAX---最大值 MIN--最小值 AVG--平均值 SUM--求和 COUNT--记录的条数 EXample: --从MyStudent表中查询最大年龄,最小年龄,平均年龄,年龄的 ...
- VS自动生成的packages.config配置文件有什么用?
通过nuget管理安装了程序包之后,Visual Studio会自动生成一个关于这些程序包版本的配置文件,删除或者保留它对程序不会造成什么影响.
- Spring MVC 对于@ModelAttribute 、@SessionAttributes 的详细处理流程
初学 Spring MVC , 感觉对于 @ModelAttribute 和 @SessionAttributes 是如何被Spring MVC处理的,这一流程不是很清楚, 经过Google资料,有了 ...
- jquery.form.js实现异步上传
前台页面 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewpor ...