t shirt 變色效果 css + html + jQuery @ 牆壁彩繪 / Lin.mo 里莫彩繪事務所 , 藝術設計,

t shirt 變色效果 css + html + jQuery

分享一個網頁上常見的效果, 就是類似像這樣的
Color menu + t shirt 變色效果

這個效果其實非常容易 , 首先先建立一個基本的 html
(另外您要自備一張去背符合頁面的 png 圖檔 )

<div class="image">
<div class="color"> 
<img alt="ts" src="/images/blog/ts.png">
</div>
</div>

<div class="color-menu">

<a style="background: #cb8e00;" data-name="#cb8e00" href="javascript:;"></a>
<a style="background: #bf3922;" data-name="#bf3922" href="javascript:;"></a>
<a style="background: #d05d28;" data-name="#d05d28" href="javascript:;"></a>
<a style="background: #792423;" data-name="#792423" href="javascript:;"></a>
<a style="background: #a63437;" data-name="#a63437" href="javascript:;"></a>
<a style="background: #903373;" data-name="#903373" href="javascript:;"></a>
<a style="background: #314f6f;" data-name="#314f6f" href="javascript:;"></a>
<a style="background: #0f4c64;" data-name="#0f4c64" href="javascript:;"></a>
</div>

接下來我們編寫基本的style
<style>
.image {
margin: auto;
max-width: 500px;
}
.color-menu {
text-align: center;
margin-bottom: 30px;
}
.color-menu a {
display: inline-block;
margin-right: 10px;
border-radius: 100%;
width: 40px;
height: 40px;
}
</style>

最後就是js了
<script>
$('.color-menu a').on('click',function(){
var $color = $(this).attr('data-name');
//將當下點擊的連結設定成變數
$('.color').css('background', $color );
//讓標籤color在對應錨點時帶入色碼
});
</script>

觀看範例

里莫彩繪事務所紛絲團