此版本基於原生Javascript寫法 （另一版本為jQuery版本，請前往jQuery分類中檢視。）

　　　　一、涉及的知識點：

　　1、DOM 操作

（1）查詢節點 建立元素 新增元素 方法1 ​ （2）字串拼接 渲染字串 方法2 ​ （3） 滑鼠移入事件

　　　　二、功能：滑鼠懸浮表情，在指定區域顯示當前滑鼠的表情。

直接來個效果圖：

　　實現步驟：

　　1、html程式碼：

 1  <div class="wrapper">
 2         <div class="show">
 3             <
 
img src="./../face/1.gif" alt="" id="showImg">
 4         </div>
 5 
 6         <div class="list">
 7             <ul id="listBox">
 8                     <!-- 此處 li 為動態建立-->
 9                 <!-- 
10                     <li><img src="./face/1.gif" alt=""></li>
 
11                     <li><img src="./face/2.gif" alt=""></li>
12                     <li><img src="./face/3.gif" alt=""></li> 
13                -->
14             </ul>
15         </div>
16 
17     </div>

　　2、css程式碼：

 1 body {
 2             margin: 0;
 
 3         }
 4         ul {
 5             padding: 0;
 6             margin: 0;
 7             list-style: none;
 8         }
 9         .wrapper {
10             width: 970px;
11             height: 600px;
12             margin: 0 auto;
13             position: relative;
14         }
15         .wrapper .show {
16             width: 960px;
17             height: 400px;
18             text-align: center;
19             border: 5px solid skyblue;
20             line-height: 400px;
21         }
22         .wrapper .show img {
23             width: 48px;
24             height: 48px;
25             vertical-align: middle;
26         }
27 
28 
29         .list {
30             width: 960px;
31             height: 192px;
32             background-color: #f0f0f0;
33             position: absolute;
34             bottom: 0;
35             left: 5px;
36         }
37         .list ul {
38             width: 960px;
39             height: 192px;
40         }
41         .list ul li {
42             float: left;
43             width: 46px;
44             height: 46px;
45             border: 1px solid #fff;
46             cursor: pointer;
47         }
48         .list ul li img {
49             display: block;
50             width: 24px;
51             height: 24px;
52             margin: 11px auto;
53         }

　　3、指令碼部分：

<script>
    // 步驟：
    // 1、獲取指定元素
    var showImg = document.getElementById("showImg");
    var listBox = document.getElementById("listBox");

    // 2、定義字串變數
    var html = "";

    // 3、迴圈
    for(var i = 0 ;  i < 75 ; i ++){
        // 4、字串拼接
        html += '<li><img src="./face/'+(i+1)+'.gif" alt=""></li>';
    }
    // 5、渲染字串（表現）
    listBox.innerHTML = html;

    // 6、等字串渲染完畢 再獲取所有的li標籤
    // getElementsByTagName() 可以由父元素呼叫
    var items =  listBox.getElementsByTagName("li");
    // console.log(items)

    // 7、迴圈
    // j  是全域性變數
    for(var j = 0 ; j < items.length ; j ++ ){
        // 8、屬性繫結(實質上是給dom元素添加了屬性記錄索引值)
        items[j].index = j ;
        // 9、事件繫結
        items[j].onmouseenter = function(){
            // 10、this  事件呼叫者  當前點選的li標籤
            var num = this.index + 1;
            console.log("num:",num);
            // 11、定義圖示路徑
            var path = "./face/"+num+".gif";
            console.log(path)
            // 12、顯示圖示
            showImg.setAttribute("src",path);
        }
    }
</script>

文章到此結束。。。不要忘了還有另一版本喲~~~