<!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. STM32F103之DMA

    一.背景: 需要使用STM32的DAC,例程代码中用了DMA,对DMA之前没有实际操作过,也很早就想知道DMA到底是什么,因此,看了一下午手册,代码和网上的资料,便有了此篇文章,做个记录. 二.正文: ...

  2. 【bzoj3450】Tyvj1952 Easy

    题目描述 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:(我们来简化一下这个游戏的规则有n次点击要做,成功了就是o,失败了就是x,分数是按comb计算的,连续a个comb就有 ...

  3. 【荐】PHP Session和Cookie，Session阻塞，Session垃圾回收，Redis共享Session，不推荐Memcached保存Session

    什么是 Session 在 web 应用开发中,Session 被称为会话.主要被用于保存某个访问者的数据. 由于 HTTP 无状态的特点,服务端是不会记住客户端的,对服务端来说,每一个请求都是全新的 ...

  4. How do I enable log4net internal debugging?

    http://logging.apache.org/log4net/release/faq.html

  5. awk 双引号vs单引号

    centos下面, awk '{...}' 和 awk "{...}" 差别是很大的: [ywt@YuWentao]$ echo "a b c d 1 2 3 4&quo ...

  6. espcms联动筛选功能开发

    易思后台增加新内容模型,添加字段yewu,fuwu,leixing 修改/interface/article.php (写上新增内容模型的mid——写死的),对这个模型的内容列表写了可以联动筛选的sq ...

  7. Fitbit Flex

    Fitbit Flex 使用 7月4日,收到了在美国亚马逊上海淘的Fitbit Flex.首先谈谈这价格,在美国亚马逊上购买时的价格是98美元,下订单过后没几天,京东开始首发出售,价格定在898元.相 ...

  8. Quartz资源收藏

    项目中使用Quartz集群分享 : http://hot66hot.iteye.com/blog/1726143 发布 Quartz Job Scheduling Framework 中文 PDF 版 ...

  9. oracle中根据当前记录查询前一条和后一条记录

    select * from aa01_2014 where aaa001=(select c.p from (select aaa001,lag(aaa001,1,0)  over (order by ...

  10. libcpmt.lib 与 msvcprt.lib

    https://msdn.microsoft.com/en-us/library/2kzt1wy3(VS.80).aspx