此版本基于原生 JavaScript 写法 (另一版本为 jQuery 版本, 请前往 jQuery 分类中查看.)
一, 涉及的知识点:
1,DOM 操作
(1) 查找节点 创建元素 添加元素 方法 1 ?(2) 字符串拼接 渲染字符串 方法 2? (3) 鼠标移入事件
二, 功能: 鼠标悬浮表情, 在指定区域显示当前鼠标的表情.
直接来个效果图:
实现步骤:
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"></li>
- <li><img src="./face/2.gif"></li>
- <li><img src="./face/3.gif"></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"></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>
文章到此结束... 不要忘了还有另一版本哟~~~
来源: http://www.bubuko.com/infodetail-3655062.html