牆壁彩繪 / 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">
<!--這裡我將所有的顏色連結直接寫上css
       並加入一個自訂的data-name
       裡面的參數就是對應的色碼
-->
  <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>

觀看範例



里莫彩繪事務所紛絲團

奈思創藝網頁設計