ife2015-task2-4-5
task2-4.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0
}
#search_box{
margin:1% auto;
width:300px;
height:25px;
border:1px solid #999;
}
#input_text{
width: 240px;
border:none;
}
#input_submit{
border:none;
width:59px;
border-left: 1px solid #999;
height:25px;
}
#message_box{
position:absolute;
}
#message_box ul{
border:1px solid #999;
width:240px;
}
#message_box li{
display:none;
list-style: none;
font-size: 15px;
line-height: 1.5;
}
</style>
</head>
<body>
<!--搜索框-->
<div id="search_box">
<input autocomplete="off"; id="input_text" type="text"><input id="input_submit" type="submit">
</div>
<!--信息提示框-->
<div id="message_box">
<ul>
<li>电视剧</li>
<li>锦绣未央</li>
<li>唐嫣</li>
<li>电视剧唐嫣锦绣未央</li>
<li>综艺</li>
<li>综艺极限挑战</li>
<li>极限挑战</li>
<li>黄渤</li>
<li>综艺极限挑战黄渤</li>
<li>综艺极限挑战孙漂亮</li>
<li>综艺极限挑战神算子</li>
<li>综艺极限挑战朱碧石</li> <li>了不起的挑战综艺</li> </ul> </div><script> /** * Created by Administrator on 2016/12/8. *///封装getElementById var dom=function(ele){ return document.getElementById(ele); }; //获得某元素的top var totalTop= function (selector) { var top= selector.offsetTop; selector=selector.offsetParent; while(selector!=null){ top+=selector.offsetTop; selector=selector.offsetParent; } return top; }; //获得某元素的left var totalLeft= function (selector) { var left= selector.offsetLeft; selector=selector.offsetParent; while(selector!=null){ left+=selector.offsetLeft; selector=selector.offsetParent; } return left; }; //定位信息提示框的位置 dom("message_box").style.top=totalTop(dom("search_box"))+dom("search_box").clientHeight+"px"; dom("message_box").style.left=totalLeft(dom("search_box"))+"px"; //监听输入的信息 var index = -1; function addEvent(selector, event, listener) { if(selector.addEventListener){ selector.addEventListener(event,listener,false); } else if(selector.attachEvent){ selector.attachEvent("on"+event,listener); } else{ selector["on"+event]=listener; } } addEvent(dom("input_text"),"keyup",suggest); var as=new Array; //监听事件的listener function suggest() { var text=dom("input_text").value.replace(/\s+/,''); var lii=document.getElementsByTagName("li"); document.onclick=function(){ for(var i= 0,l= lii.length;i<l;i++){ lii[i].style.display="none"; } }; var j=0; for(var i= 0,l= lii.length;i<l;i++){ lii[i].style.display="none"; if(lii[i].innerHTML.substring(0,text.length)==text){ lii[i].style.display="block"; as[j]=lii[i]; j++; } } for(var i=0;i<as.length;i++) { as[i].onmouseover = function () { this.style.background = "#999"; var idx = Array.indexOf(as, this); index = idx; }; as [i].onclick = function (event) { event = event || window.event; if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } for(var i= 0,l= lii.length;i<l;i++){ lii[i].style.display="none"; } console.log(this.innerHTML); dom("input_text").value = this.innerHTML; }; as [i].onmouseout = function () { this.style.backgroundColor = "#fff"; }; //监听相应按键取值的事件 document.onkeyup = function (event) { event = event || window.event; for (var i = 0; i < as.length; i++) { as[i].style.background = "#fff"; } if (event.keyCode == 38) { if (index > 0) { console.log(index); index = index - 1; as[index].style.background = "#999"; } else { console.log(event.keyCode); index = as.length - 1; console.log(index); as[index].style.background = "#999"; } } else if (event.keyCode == 40) { if (index < as.length - 1) { index = index + 1; as[index].style.background = "#999"; } else { console.log(event.keyCode); index = 0; as[index].style.background = "#999"; } } else if (event.keyCode == 13) { for(var i= 0,l= lii.length;i<l;i++){ lii[i].style.display="none"; } if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } dom("input_text").value = as[index].innerHTML; } }; } }</script>
</body>
</html> task2-5.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box{
position:relative;
}
#left div,#right div{
background:white;
width:200px;
height:50px;
border:1px solid black;
position:absolute;
}
#right div{
left:1130px;
}
#left div{
left:1px;
}
#left{
float:left;
width:202px;
height:400px;
border:1px solid black;
}
#right{
float:right;
width:202px;
height:400px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="box">
<div id="left">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div id="right">
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</div>
<script src="scripts/util.js"></script>
<script>
getTop();
// javascript定义css样式
function getTop(){
var l=$('#left').getElementsByTagName('div');
var r=$('#right').getElementsByTagName('div');
for(var i=0;i< l.length;i++){
l[i].style.top=i*50+'px';
l[i].style.left=1+'px';
}
for(var i=0;i< r.length;i++){ r[i].style.top=i*50+'px'; r[i].style.left=1130+'px'; } }// 事件代理 #left 的mousedown事件 delegateEvent($("#left"),"div",'mousedown', function (target,e) { posX= e.clientX- target.offsetLeft, posY= e.clientY- target.offsetTop;// onmousemove事件会更新clientX，不会更新offsetLeft，所以先取得鼠标离target边框的posX和posY target.onmousemove= function (e) { e=e||window.event; target.style.left= (e.clientX-posX)+'px'; target.style.top= (e.clientY-posY)+'px'; };// 判断松开时的坐标，并定义其坐标 target.onmouseup=function(e){ target.onmousemove=null; e=e||window.event; target.style.left= (e.clientX-posX)+'px'; target.style.top= (e.clientY-posY)+'px'; target.onmouseup=null; if(e.clientX>=620){ var lastTop=$('#right').getElementsByTagName("div").length*50; var lastLeft=1130+'px'; $("#left").removeChild(target); $('#right').appendChild(target); target.style.left= lastLeft; target.style.top= lastTop+'px'; } else{ $("#left").removeChild(target); $('#left').appendChild(target); target.style.left= orginX; target.style.top= orginY; } };// var clone=cloneObject(target);// $("#left").removeChild(target);// $('#right').appendChild(target); }) // 事件代理 #right 的mousedown事件 delegateEvent($("#right"),"div",'mousedown', function (target,e) { posX= e.clientX- target.offsetLeft, posY= e.clientY- target.offsetTop;// onmousemove事件会更新clientX，不会更新offsetLeft，所以先取得鼠标离target边框的posX和posY target.onmousemove= function (e) { e=e||window.event; target.style.left= (e.clientX-posX)+'px'; target.style.top= (e.clientY-posY)+'px'; };// 判断松开时的坐标，并定义其坐标 target.onmouseup=function(e){ target.onmousemove=null; e=e||window.event; target.style.left= (e.clientX-posX)+'px'; target.style.top= (e.clientY-posY)+'px'; target.onmouseup=null; if(e.clientX<=620){ var lastTop=$('#left').getElementsByTagName("div").length*50; var lastLeft=1+'px'; $("#right").removeChild(target); $('#left').appendChild(target); target.style.left= lastLeft; target.style.top= lastTop+'px'; } else{ $("#right").removeChild(target); $('#right').appendChild(target); target.style.left= orginX; target.style.top= orginY; } };// var clone=cloneObject(target);// $("#left").removeChild(target);// $('#right').appendChild(target); })</script></body></html>
onmousemove事件会更新clientX，不会更新offsetLeft，所以先取得鼠标离target边框的posX和posY 不然会有闪动
ife2015-task2-4-5的更多相关文章
- task2
1. 邮件修改Mailtemplatereportfieldlink带<>的都改翻译${MAWBTask} 2.测试发邮件 3.找出能做成模版的所有地方,改成模版,复杂的地方记录下来
- 输入框提示--------百度IFE前端task2
第一版本: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
- 深度克隆（对象、数组）--------百度IFE前端task2
var srcObj = { a: 1, b: { b1: ["hello", "hi"], b2: "JavaScript" }}; co ...
- GDSOI2015 task2 覆盖半径
题目大意 一个\(n\times m\)的矩阵中有\(p\)个已经确定圆心的圆,并且每个格子有一定的分数,如果一个格子被任意一个或以上的圆覆盖,那么就可以得到这个格子的分数.现在求最小的半径,使得得分 ...
- 清华集训2014 day1 task2 主旋律
题目 这可算是一道非常好的关于容斥原理的题了. 算法 好吧,这题我毫无思路,直接给正解. 首先,问题的正面不容易求,那么就求反面吧: 有多少种添加边的方案,使得这个图是DAG图(这里及以下所说的DAG ...
- 【深度学习】吴恩达网易公开课练习(class2 week1 task2 task3)
正则化 定义:正则化就是在计算损失函数时,在损失函数后添加权重相关的正则项. 作用:减少过拟合现象 正则化有多种,有L1范式,L2范式等.一种常用的正则化公式 \[J_{regularized} = ...
- verilog task2
1.问题:串口的发送和接收 系统时钟50Mhz,波特率119200.系统时钟计数约2604个,才是一位数据的传输时间. 模拟接收的任务函数rx_data_task():LSB first task r ...
- 百度前端技术学院-task2.18-2.19源码以及个人总结
源码:http://yun.baidu.com/share/link?shareid=2310452098&uk=1997604551 1.感觉在写js的时候,最好先理清思路,先干什么,在干什 ...
- Datawhale MySQL 训练营 Task2 查询语句
目录 MySQL 管理 MySQL 用户管理 参考 数据库管理 SQ查询语句 1. 导入示例数据库,教程 MySQL导入示例数据库 2. 查询语句 SELECT 3. 筛选语句 WHERE ,过滤 4 ...
- Task2 四则运算2
1.任务要求:对之前的自动出题系统提出了新的要求:(1).题目避免重复:(2).可定制(数量/打印方式):(3)可以控制下列参数:是否有乘除法.数值范围.加减有无负数.除法有无余数.是否支持分数... ...
随机推荐
- JavaScript里面之dom操作
1.dom之选择元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- web自动化测试：watir+minitest（五）
测试报告: 加载minitest-reporters库,并设置相关的参数.既可以在每次运行测试后生成响应的测试报告. 默认会生成一份html的报告在当前目录的test目录下 我们可以指定参数对报告的标 ...
- Redis键管理
Redis键管理 Redis 键命令用于管理 redis 的键. 语法 Redis 键命令的基本语法如下: redis > COMMAND KEY_NAME redis > SET w3c ...
- 【转】oracle 删除重复记录
转至:http://blog.163.com/aner_rui/blog/static/12131232820105901451809/ 2.保留一条(这个应该是大多数人所需要的 ^_^) Delet ...
- UVA 11478(差分约束 + 二分）
题意: 给定一个有向图,每条边都有一个权值,每次你可以选择一个结点和一个整数的,把所有以v为终点的边的权值减去d, 把所有以v为起点的边的权值加上d 最后要让所有边的权的最小值非负且尽量大 代码 #i ...
- display 垂直居中
/* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex ...
- ie8 不支持media
可以用respond.js库解决,bootstrap文件夹里有.同时需要注意以下几点. 1.需要启动本地服务器(localhost),不能使用普通本地的url地址(file://开头): 2.需要外部 ...
- 杭电oj2081、2091、1004、2057
2081 手机短号 #include<stdio.h> #include<string.h> int main(){ int i,n; ]; while(scanf(&quo ...
- 蓝牙攻击指南（kali）
基本操作 hciconfig 查看蓝牙设备信息 hcitool:这是一个查询工具. 可以用来查询设备名称,设备ID,设备类别和设备时钟. hcidump:可以使用这个来嗅探蓝牙通信 hciconfig ...
- c# GDI画图 双缓冲画图分析
双缓冲绘图分析 1.Windows 绘图原理 我们在 Windows 环境下看到各种元素,如菜单.按钮.窗口.图像,从根本上说,都是“画”出来的.这时的屏幕,就相当于一块黑板,而 Windows ...