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)可以控制下列参数:是否有乘除法.数值范围.加减有无负数.除法有无余数.是否支持分数... ...
随机推荐
- C# 访问修饰符internal的访问范围误区释疑
一.前言 MSDN关于访问修饰符的访问级别解释: 访问修饰符是一些关键字,用于指定声明的成员或类型的可访 ...
- HDU 4910 HDOJ Problem about GCD BestCoder #3 第四题
首先 m = 1 时 ans = 0对于 m > 1 的 情况 由于 1 到 m-1 中所有和m互质的数字,在 对m的乘法取模 运算上形成了群 ai = ( 1<=a<m & ...
- 树（tree）
树(tree) 题目描述 小明正在研究一种砍树游戏.一开始在W列H行的方格上,每一个格子都长着一颗树,格子的行从北到南依次编号,格子的列从西到东依次编号. 小明会砍倒一些树,每砍倒一颗树,树会占据这个 ...
- HTML，CSS，font-family：中文字体的英文名称【转载】
转自:http://www.9958.pw/post/html_font-family 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft ...
- [解决方案]NuGet打包报错： 'X' already has a dependency defined for 'Y'
大家在打包Nuget包的时候,最后会执行以下语句 nuget pack .\ML.Common.SDK.csproj -Prop Configuration=Release 执行此句后,提示以下报错信 ...
- 配置postfix支持虚拟域和虚拟用户
请先看基础篇 https://www.cnblogs.com/hellojackyleon/p/9281620.html https://sourceforge.net/projects/couri ...
- Create Windows Server 2008 cluster from the command line
How to create a Windows Server 2008 cluster from the command line? Creating a cluster in Server 2008 ...
- SyntaxError: Unexpected token ' in JSON at position 1
刚才遇到一个问题: 在公司两个不同的环境竟然会出现错误 对比一下两个环境的数据,发现一个传来的是双引号的JSON字符串,一个是单引号.而当我用JSON.parse()时,就会报错!! 原因是JSON. ...
- 大工程（bzoj 3611）
Description 国家有一个大工程,要给一个非常大的交通网络里建一些新的通道. 我们这个国家位置非常特殊,可以看成是一个单位边权的树,城市位于顶点上. 在 2 个国家 a,b 之间建一条新通 ...
- 关于0x*** 十六进制的运算。为什么枚举多用十六进制的运算原因。。
1.看个人爱好 2.可以看出布尔运算的结果. 3.可以更快进行and和or 运算