<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}

#div1 {
width: 500px;
height: 200px;
overflow-y: scroll;
border: 1px solid black;
}
#div1 img{

}
#Imgs {
width: 500px;
list-style: none;
margin-left: 5px;
margin-top: 5px;
display: none;
}
#Imgs li{
float: left;
border: 1px solid black;
margin-top: -1px;
margin-left: -1px;
}
#Imgs li img{
width: 50px;
height: 50px;
}
</style>
</head>

<body>
<div id="div1"></div>
<input type="button" value="发送表情" id="btn_Send" />
<ul id="Imgs">
</ul>
<script>
var ul;
var div1;
var divHeight;
window.onload = function() {
ul = document.getElementById("Imgs");
div1=document.getElementById("div1");
divHeight=div1.offsetHeight;
var arr = [
["1.gif", "得瑟"],
["10.gif", "得瑟"],
["11.gif", "得瑟"],
["12.gif", "得瑟"],
["13.jpg", "得瑟"],
["14.gif", "得瑟"],
["15.gif", "得瑟"],
["16.gif", "得瑟"],
["17.jpg", "得瑟"],
["18.jpg", "得瑟"],
["19.gif", "得瑟"],
["2.gif", "得瑟"],
["21.jpg", "得瑟"],
["22.jpg", "得瑟"],
["20.gif", "得瑟"],
["3.gif", "得瑟"],
["5.gif", "得瑟"],
["4.gif", "得瑟"],
["6.gif", "得瑟"],
["7.gif", "得瑟"],
["8.gif", "得瑟"],
["9.gif", "得瑟"]
];

for(var i=0,len=arr.length;i<len;i++){
var li = document.createElement("li");
var img = document.createElement("img");
img.src = "img/"+arr[i][0];
img.setAttribute("alt", "表情");
img.setAttribute("title", arr[i][1]);
img.onclick=ImgClick;
li.appendChild(img);
ul.appendChild(li);
}

document.getElementById("btn_Send").onclick=function(){

ul.style.display="block";

}

}

function ImgClick(e){
var oEvent=window.event||e;
var img=oEvent.srcElement||oEvent.target;
var img1=document.createElement("img");
img1.src=img.src;
img1.title=img.title;
img1.setAttribute("alt",img.getAttribute("alt"));
img1.width="50";
img1.height="50";
img1.style.display="block";
document.getElementById("div1").appendChild(img1);
ul.style.display="none";
divScroll();
}
//滚动条滚动距离
function divScroll(){
var divChild=div1.childNodes;
var height=0;
for(var i=0,len=divChild.length;i<len;i++){
height+=divChild[i].offsetHeight;

}
console.log(height-divHeight);
document.getElementById("div1").scrollTop=height-divHeight;
}

</script>
</body>
</html>

javascript平时例子⑩（表情发送）的更多相关文章

  1. javascript平时例子⑧（大屏轮播）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  2. JavaScript小例子：复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...

  3. javascript平时小例子⑨(小型抽奖功能)

    <!doctype html><html lang="en"> <head> <meta charset="utf-8" ...

  4. javascript平时小例子⑧(导航置顶效果)

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  5. javascript平时小例子⑦(鼠标跟随的div)

    <!doctype html><html> <head> <meta charset="utf-8"> <title>无 ...

  6. javascript平时小例子⑥(简易计算器的制作)

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  7. javascript平时小例子⑤(投票效果的练习)

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. javascript平时小例子④（setInterval使用2）

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...

  9. javascript平时小例子③（setInterval使用1）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

随机推荐

  1. hive单机安装（实战）

    hive使用与注意事项:http://blog.csdn.net/stark_summer/article/details/44222089 连接命令:beeline -n root -u jdbc: ...

  2. 解决Xftp经常断开连接的问题，Xftp中文乱码

    #文件 --> 选项 --> 勾选“发送保持活动状态消息” 间隔 60秒 #工具 -> 选项 延伸阅读: Xshell个性化设置,解决Xshell遇到中文显示乱码的问题

  3. PHP如何通过Http Post请求发送Json对象数据？

    因项目的需要,PHP调用第三方 Java/.Net 写好的 Restful Api,其中有些接口,需要 在发送 POST 请求时,传入对象. Http中传输对象,最好的表现形式莫过于JSON字符串了, ...

  4. mongDB-- 3. 查询操作

    1. 准备工作 (1)启动mongo 进入mongo安装目录的bin/ 目录 , ./mongod (2)启动mongo客户端 ./mongo (3) 查看所有库 show dbs; (4) 切换到l ...

  5. [k]优雅的css

    1.图片文字列表 (2016-01-25) 1.1 实现效果图如下: 1.2 代码: html:( 代码十分优雅哦! ) <ul> <li class="step1&quo ...

  6. iOS 引入framework的常见问题和原理

    今天在引入第三方framework时,我按照以前的方法,把framework加入到了下图的地方: 默认是required的,之后程序就crash了,报错dyld: Library not loaded ...

  7. windows网络编程

    1.协议的特征 面向消息的和基于流的 面向连接的和面向无连接的 2.端口分为三类:“已知”端口.已注册端口.动态和私用端口 0~1023 IANA控制,为固定服务保留的 1024~49151 已注册端 ...

  8. Class.forName的使用

    Class.forName的使用 Class.forName返回一个类,使用此方法可以获取类 首先,创建一个Student类 /*** * This Class is for Student bean ...

  9. Word 2010 发布博文测试

    新建"博客文章" 点击"文件-> 新建 -> 博客文章 -> 创建": 新窗口的编辑区和不同模式的word有所不同,如果你还没有设置博客账号( ...

  10. float 比较， 这是一个坑

    为了方便随机关键产品数据,做了一个随机值列的方案,列字段类型设置为float. 在测试的两个随机值的时候, 故意设置了几个随机值相同保存到数据库表中, 这样问题就出来了. 详细如下: 当进行小于比较的 ...