表情列表展示

　　此版本基于原生Javascript写法  （另一版本为jQuery版本，请前往jQuery分类中查看。）

　　　　一、涉及的知识点：   

            　　1、DOM 操作

                （1）查找节点 创建元素 添加元素 方法1 ​ （2）字符串拼接 渲染字符串 方法2 ​  （3） 鼠标移入事件

 　　　　    2、呃......至于表情这个东西嘛，就自行找渠道下载了哈。放啥表情由你来决定。

　　　　二、功能：鼠标悬浮表情，在指定区域显示当前鼠标的表情。

      直接来个效果图：

    

 

　　实现步骤：

　　1、html代码：

 <div class="wrapper">
        <div class="show">
            <img src="./../face/1.gif" alt="" id="showImg">
        </div>

        <div class="list">
            <ul id="listBox">
                    <!-- 此处 li 为动态创建-->
                <!-- 
                    <li><img src="./face/1.gif" alt=""></li>
                    <li><img src="./face/2.gif" alt=""></li>
                    <li><img src="./face/3.gif" alt=""></li> 
               -->
            </ul>
        </div>

    </div>

　　2、css代码：

body {
            margin: 0;
        }
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .wrapper {
            width: 970px;
            height: 600px;
            margin: 0 auto;
            position: relative;
        }
        .wrapper .show {
            width: 960px;
            height: 400px;
            text-align: center;
            border: 5px solid skyblue;
            line-height: 400px;
        }
        .wrapper .show img {
            width: 48px;
            height: 48px;
            vertical-align: middle;
        }


        .list {
            width: 960px;
            height: 192px;
            background-color: #f0f0f0;
            position: absolute;
            bottom: 0;
            left: 5px;
        }
        .list ul {
            width: 960px;
            height: 192px;
        }
        .list ul li {
            float: left;
            width: 46px;
            height: 46px;
            border: 1px solid #fff;
            cursor: pointer;
        }
        .list ul li img {
            display: block;
            width: 24px;
            height: 24px;
            margin: 11px auto;
        }

　　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>

 

呀哈，经历千辛万苦终于完写了。看我下次还用不用这个方法写。(哈哈哈，开玩笑开玩笑，该写还是要写的)。 不要忘了还有另一版本是jQuery写的哟，那才叫骚气~~~

 

文章到此结束。。。