<!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. PHP中的错误处理、异常处理机制详解

    在编写PHP程序时,错误处理是一个重要的部分.如果程序中缺少错误检测代码,那么看上去很不专业,也为安全风险敞开了大门 例: <?php $a = fopen('test.txt','r'); / ...

  2. 完整的PHP MYSQL数据库类

    <?php class mysql {     private $db_host; //数据库主机     private $db_user; //数据库用户名     private $db_ ...

  3. thinkphp表单自动验证

    ThinkPHP框架表单验证 对注册到test表的表单进行验证 在注册之前要对表单进行验证: 用户名非空验证,两次输入密码必须一致即相等验证,年龄在18~50之间即范围验证,邮箱格式正则验证. 自动验 ...

  4. git 教程（15）--分支管理策略

    通常,合并分支时,如果可能,Git会用Fast forward模式,但这种模式下,删除分支后,会丢掉分支信息. 如果要强制禁用Fast forward模式,Git就会在merge时生成一个新的comm ...

  5. python之路四

    内建函数 内建函数详解: 1. abs(x) abs()函数返回数字(可为普通型.长整型或浮点型)的绝对值.如果给出复数,返回值就是该复数的模.例如: >>>print abs(-2 ...

  6. Socket通信（二）

    程序下载地址: http://download.csdn.net/detail/u010312811/9683748 1.基本流程 服务器:(1)用指定的端口号和服务器的IP建立一个EndPoint对 ...

  7. js指定分隔符连接数组元素join()

    指定分隔符连接数组元素join() join()方法用于把数组中的所有元素放入一个字符串.元素是通过指定的分隔符进行分隔的. 语法: arrayObject.join(分隔符) 参数说明: 注意:返回 ...

  8. CSS 多类选择器

    写的代码多了,就会发现,自己越来越无知了,总以为html css很简单,已经掌握的很熟练了,其实我还差的很多. 平时没有用过css的这种写法  .a.b{display:block;}   上网一查才 ...

  9. 【转】B-树和B+树的应用：数据搜索和数据库索引

    B-树 1 .B-树定义 B-树是一种平衡的多路查找树,它在文件系统中很有用. 定义:一棵m 阶的B-树,或者为空树,或为满足下列特性的m 叉树: ⑴树中每个结点至多有m 棵子树: ⑵若根结点不是叶子 ...

  10. 将UINavgationController的push改成从左到右

     CATransition* transition = [CATransition animation]; transition.type = kCATransitionPush;        // ...