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)可以控制下列参数:是否有乘除法.数值范围.加减有无负数.除法有无余数.是否支持分数... ...
随机推荐
- 软工实践Alpha冲刺(10/10)
队名:起床一起肝活队 组长博客:博客链接 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过去两天完成了哪些任务 描述: 完成所有界面的链接,整理与测试 展示GitHub当日代码/ ...
- sql server获取后天距离某一日期还有多少周的写法
),,),'2012-10-18 00:00:00.000')
- favicon.ico generator
favicon.ico generator https://www.favicon-generator.org/ https://www.favicon.cc/ https://www.favicon ...
- POJ2374 Fence Obstacle Course 【线段树】
题目链接 POJ2374 题解 题意: 给出\(n\)个平行于\(x\)轴的栅栏,求从一侧栅栏的某个位置出发,绕过所有栅栏到达另一侧\(x = 0\)位置的最短水平距离 往上说都是线段树优化dp 我写 ...
- ci动态设置config配置
$this->config->set_item('cookie', 'item_value');echo $this->config->item('cookie');
- 内部类（inner class）的简单介绍
本文主要介绍内部类(inner class)的一些基本应用,将从内部类的分类角度,首先对每一个具体内部类进行介绍.主要包括普通的内部类[common inner class].局部内部类[local ...
- shell脚本——项目1
案例名称:系统初始化 背景:10台已装有linux系统的服务器 需求: 1.设置时区同步 2.禁用selinux 3.清空防火墙策略 4.历史命令显示操作时间 5.禁止root远程登录 6.禁止定时任 ...
- canvas2D 基础知识 浅析
1.canvas HTML5给出的一个可以展示绘图内容的标签 使用领域: (推荐网站:threejs.org) 1. 游戏 2. 可视化数据 3. Banner广告 4. 多媒体 (1)在 c ...
- 总结各种width，height，top，left
1.offsetWidth 内容+内边距(padding)+边框(border) 2.offsetHeight 内容+内边距(padding)+边框(border) 3.offsetLeft 获取对象 ...
- 2015年4月1日 14:36:56 EF 主从表更新
公司封装框架的人把eF封在了工作单元里面,使用了Unitofwork这样的形式, 我用代码生成器生成了基础的单表操作的代码. 这种方式对多表有问题. 暂时只得,一张表一张表地操作, 我采用先用List ...