使用Sticker.js實(shí)現(xiàn)貼紙效果
更新時(shí)間：2015年01月28日 16:51:01 投稿：hebedich
這篇文章主要介紹了如何在網(wǎng)站里使用Sticker.js實(shí)現(xiàn)貼紙效果，非常炫酷，推薦給大家
Sticker.js 是一個(gè)很小的 JavaScript 庫，它允許您在網(wǎng)頁中創(chuàng)建漂亮的貼紙效果。沒有依賴關(guān)系(不需要 jQuery)，可以在大多數(shù)支持 CSS3 的主流瀏覽器工作。下面有簡(jiǎn)單的使用示例，更多功能等著你去發(fā)現(xiàn)。
使用示例：
HTML：
復(fù)制代碼 代碼如下:
<!-- dom elements -->
<div class="sticker example-1"></div>
<div class="sticker example-2"></div>
CSS：
復(fù)制代碼 代碼如下:
.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：
復(fù)制代碼 代碼如下:
<!-- call sticker js -->
Sticker.init('.sticker');
相關(guān)文章
原生JS+HTML5實(shí)現(xiàn)跟隨鼠標(biāo)一起流動(dòng)的粒子動(dòng)畫效果
這篇文章主要介紹了原生JS+HTML5實(shí)現(xiàn)跟隨鼠標(biāo)一起流動(dòng)的粒子動(dòng)畫效果,涉及javascript事件響應(yīng)、數(shù)值運(yùn)算及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05
JS異步編程之generator與async/await語法糖詳解
這篇文章主要為大家詳細(xì)介紹了JS異步編程中g(shù)enerator與async/await語法糖的使用，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以學(xué)習(xí)一下2022-11-11
javascript實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊欄代碼
這篇文章主要介紹了javascript實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊欄代碼,需要的朋友可以參考下2014-02-02
JS實(shí)現(xiàn)動(dòng)態(tài)增加和刪除li標(biāo)簽行的實(shí)例代碼
下面小編就為大家?guī)硪黄狫S實(shí)現(xiàn)動(dòng)態(tài)增加和刪除li標(biāo)簽行的實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
基于javascript的COOkie的操作實(shí)現(xiàn)只能點(diǎn)一次
這篇文章主要介紹了基于javascript的COOkie的操作實(shí)現(xiàn)只能點(diǎn)一次,需要的朋友可以參考下2014-12-12
Chrome調(diào)試折騰記之JS斷點(diǎn)調(diào)試技巧
這篇文章主要介紹了Chrome調(diào)試折騰記之JS斷點(diǎn)調(diào)試技巧，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
游戲開發(fā)中如何使用CocosCreator進(jìn)行音效處理
這篇文章主要介紹了游戲開發(fā)中如何使用CocosCreator進(jìn)行音效處理，并對(duì)音效組件進(jìn)行封裝，方便以后使用，同學(xué)們看完之后，一定要親手實(shí)驗(yàn)一下2021-04-04
這篇文章主要為大家介紹了輸入npm?run?xxx后執(zhí)行原理深入解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
微信小程序跳轉(zhuǎn)外部鏈接的詳細(xì)實(shí)現(xiàn)方法
寫這個(gè)是因?yàn)樽罱〕绦虻囊粋€(gè)需求需要從小程序跳轉(zhuǎn)到客戶的官網(wǎng),或者其他外部報(bào)名鏈接,下面這篇文章主要給大家介紹了關(guān)于微信小程序跳轉(zhuǎn)外部鏈接的詳細(xì)實(shí)現(xiàn)方法,需要的朋友可以參考下2022-10-10
dropdownlist之間的互相聯(lián)動(dòng)實(shí)現(xiàn)（顯示與隱藏）
dropdownlist之間的互相聯(lián)動(dòng)（顯示與隱藏）2009-11-11