图片/图形
纯JS和CSS3炫酷桌面便签贴纸特效插件
PetitQ
Sticker.js 是一款使用纯 JavaScript 和 CSS3 来制作炫酷桌面便签贴纸特效的插件。通过该插件可以将任何块级元素转换为桌面便签，并且在鼠标滑过便签时，便签会随着鼠标移动产生卷纸弯曲效果，非常的酷。
使用方法
使用该桌面便签插件需要在页面中引入 sticker.js 文件。
也想出现在这里？联系我们吧
<script type="text/javascript" src="js/sticker.js"></script>
HTML 结构
可以使用一个<div>或其它块级元素来作为桌面便签的容器。桌面便签可以是图片，也可以是其它 HTML 元素。
<!-- 第一个例子使用图片作为背景 -->
<div class="sticker example-1"></div>
<!-- 第二个例子使用背景颜色 -->
<div class="sticker example-2"></div>
CSS 样式
为.sticker 元素设置一个高度和宽度。在插件初始化之后，便签容器中会动态生成一个.sticker-img 元素，这个元素用于设置背景图片或背景颜色。
.sticker {
width: 180px;
height: 180px;
}// 添加背景图片
.example-1 .sticker-img {
background-image: url(heroes-2.png);
}// 添加背景颜色
.example-2 .sticker-img {
background-color: #ff4a85;
}// 修改阴影的透明度
.example-2 .sticker-shadow {
opacity: 0.6;
}
初始化插件
在页面加载完毕之后可以通过下面的方法来初始化该便签插件。
window.onload = function() {
Sticker.init('.sticker');
}
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
