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)可以控制下列参数:是否有乘除法.数值范围.加减有无负数.除法有无余数.是否支持分数... ...
随机推荐
- QQ网页强制聊天，微博一键关注
<!doctype html> <!-- 微博关注需要的js --> <html xmlns:wb="http://open.weibo.com/wb" ...
- android瀑布流照片墙实现代码详解
照片墙的实现,是需要往手机里面添加很多图片的,如果没有对资源进行合理的释放,程序很快就会出现OOM.所以需要用到LruCache算法来缓存图片. 1,首先是图片资源类,这个类中包含了很多图片链接. p ...
- Nagios 监控系统架设全攻略
Nagios 全名为(Nagios Ain’t Goona Insist on Saintood),最初项目名字是 NetSaint.它是一款免费的开源 IT 基础设施监控系统,其功能强大,灵活性强, ...
- 省选算法学习-回文自动机 && 回文树
前置知识 首先你得会manacher,并理解manacher为什么是对的(不用理解为什么它是$O(n)$,这个大概记住就好了,不过理解了更方便做$PAM$的题) 什么是回文自动机? 回文自动机(Pal ...
- 一文看懂Kafka消息格式的演变
摘要 对于一个成熟的消息中间件而言,消息格式不仅关系到功能维度的扩展,还牵涉到性能维度的优化.随着Kafka的迅猛发展,其消息格式也在不断的升级改进,从0.8.x版本开始到现在的1.1.x版本,Kaf ...
- BZOJ5300 [Cqoi2018]九连环 【dp + 高精】
题目链接 BZOJ5300 题解 这题真的是很丧病,,卡高精卡到哭 我们设\(f[i]\)表示卸掉前\(i\)个环需要的步数 那么 \[f[i] = 2*f[i - 2] + f[i - 1] + 1 ...
- gerrit工具-workflow
gerrit-workflow
- 朗格拉日计数(counter)
朗格拉日计数(counter) 题目描述 在平面上以圆周等分排列着n个带标号(标号为1-n)的点,你需要计算有多少个三元组(a,b,c),满足a<b<c而且标号为a,b,c的点在圆上分布的 ...
- 3.1 Java以及Lucene的安装与配置
Lucene是Java开发的一套用于全文检索和搜索的开源程序库,它面向对象多层封装,提供了一个低耦合.与平台无关的.可进行二次开发的全文检索引擎架构,是这几年最受欢迎的信息检索程序库[1].对Luce ...
- 用Spring注解的方式实现对某个网页的访问
本案例的目标是加强对@Controller @RequestMapping @Resource @Service 的感性认识,能过知道这几个注解是怎么用的,以及spring和springmvc ...