javascript平时例子⑩(表情发送)
<!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平时例子⑩(表情发送)的更多相关文章
- javascript平时例子⑧(大屏轮播)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- JavaScript小例子:复选框全选
JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...
- javascript平时小例子⑨(小型抽奖功能)
<!doctype html><html lang="en"> <head> <meta charset="utf-8" ...
- javascript平时小例子⑧(导航置顶效果)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- javascript平时小例子⑦(鼠标跟随的div)
<!doctype html><html> <head> <meta charset="utf-8"> <title>无 ...
- javascript平时小例子⑥(简易计算器的制作)
<!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...
- javascript平时小例子⑤(投票效果的练习)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- javascript平时小例子④(setInterval使用2)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...
- javascript平时小例子③(setInterval使用1)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
随机推荐
- 支持向量机SVM
SVM(Support Vector Machine)有监督的机器学习方法,可以做分类也可以做回归.SVM把分类问题转化为寻找分类平面的问题,并通过最大化分类边界点距离分类平面的距离来实现分类. 有好 ...
- shell 脚本之获取命令输出字符串以及函数参数传递
在ubuntu 14.04之后,所有的U盘挂载也分用户之分,最近很多操作也和U盘有关,所以就研究了一上午shell脚本函数以及字符串操作的方法. 字符串操作: 获取他的命令输出比较简单,打个简单的比方 ...
- 面向对象(五)super
super方法只是为了执行继承父级的init方法,若要详细,请参考别人的博客 class a(object): def __init__(self): print("aINIT") ...
- Java实现JDBC连接数据库实例
import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...
- Angular2 组件
1. 组件说明 Angular2 组件是构成Angular2应用程序的核心部分,Angualr2应用程序本质上来说就是一个组件树,Angular2组件一般由模块,注解,元数据以及组件类组成,实现组件类 ...
- MysqlWorkbench连接远程数据
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- 原生js完成拼图小游戏
废话不说,看代码,图片可以自己找,我这直接引用了百度的了 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml ...
- TableView 隐藏多余的分割线
- (void)setExtraCellLineHidden: (UITableView *)tableView { UIView *view = [UIView new]; view.backgro ...
- Delphi:与VCL同步(Synchronize()、用消息来同步)
看本文时,可以同时参考:Delphi中线程类 TThread实现多线程编程(事件.临界区.Synchronize.WaitFor……) 先说一下RTL和VCL RTL(Run-Time library ...