<!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. socket编程热身程序

    /*server.c*/ #include <stdio.h> #include <arpa/inet.h> #include <sys/types.h> /* S ...

  2. linuxmint 17安装qt5.3.1

    从官方网站上下载的安装包,双击安装即可. 新建项目编译时,出现错误:cannot find -lGL 解决的方法:安装libgl1-mesa-dev,当然在安装时会安装其他的一些依赖包 在命令行中输入 ...

  3. java笔记--关于线程同步（7种同步方式）

    关于线程同步(7种方式) --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/3897440.html"谢谢-- 为何要使用同步? ...

  4. ASM，C数据类型

    汇编: db  单字节 = 8bit dw 单字    = 16bit dd  双字   = 32bit C数据类型: char                字节 8bit unsigned cha ...

  5. GCC 编译优化指南(转)

    GCC 编译优化指南(转) http://www.jinbuguo.com/linux/optimize_guide.html 作者:金步国 版权声明 本文作者是一位开源理念的坚定支持者,所以本文虽然 ...

  6. 练习题（登陆-进度条-微信接口判断qq-微信接口判断列车时刻表-）

    1.写一个用户的登陆注册的界面,用户的密码用hashlib加密存在文件中,登陆时候,用户的密码要和文件中的密码一致才行 def sha(password): #加密函数 passwd = hashli ...

  7. 动态执行python脚本

    前言 存在许多独立的python脚本,这些脚本可能会增加,也可能会减少,现在需要按照某种顺序调度这些程序.在python的standard library中,有一个模块imp可以实现动态的调用ptho ...

  8. Servlet 之 HttpServlet

    package cn.jiemoxiaodi.http; import java.io.IOException; import javax.servlet.GenericServlet; import ...

  9. jquery之toggleClass应用

    今天记载一下常用的html + css + jquery效果应用 1.html内容 <div class="selBtn screen_btn"> <a id=& ...

  10. C/C++:C++中static，extern和extern "C"关键字

    1. extern 变量 extern 表明该变量在别的地方已经定义过了,在这里要使用那个变量. 当extern不与"C"在一起修饰变量或函数时,如在头文件中: extern in ...