html與emoji表情

前言

　　作項目涉及表情在網頁上顯示。稍微研究了一下實現方案，總體思路不復雜，就是稍微涉及到一些新概念和新方法。

精靈圖

　　精靈圖又稱雪碧圖，簡單來講就是一種把不少小圖片拼成一張大圖的圖片形式。下圖就是表情項目中的精靈圖。注意這張精靈圖是png格式，除表情外其餘區域都是透明的。

　　精靈圖解決的問題是：不少網頁在首次加載的時候都須要加載不少的小圖片，而考慮到在同一時間，服務器擁堵的狀況下，爲了解決這一問題，採用了精靈圖這一技術來緩解加載時間過長從而影響用戶體驗的這個問題。

　　項目中就將從上面的精靈圖取出一個個表情。

背景定位

　　在精靈圖上，每一個表情都有本身的位置和長寬。例如笑哭表情，位置是-192px -128px，長寬均爲64px。

　　因此用如下的css格式就能定位到這個表情。

width: 64px;
    height: 64px;
    background-position: -192px -128px !important;
    background: url("assets/img/emoji_sprite.png");

　　其中的background後的地址就是精靈圖的位置了。

表情與文字混合

　　知道怎麼切出精靈圖後其餘操做就簡單了。把文字和表情都用span標籤存放，有如下實例：

<div>
      <span>文字與表情</span>
      <span class="emoji-item"></span>
      <span>混合顯示</span>
  </div>

.emoji-item {
    width: 64px;
    height: 64px;
    background-position: -192px -128px !important;
    background: url("assets/img/emoji_sprite.png");
    display: inline-block;
    &:hover {
      cursor: pointer;
    }
  }

　　渲染後獲得以下效果