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)可以控制下列参数:是否有乘除法.数值范围.加减有无负数.除法有无余数.是否支持分数... ...
随机推荐
- JavaWeb笔记（七）Filter&Listener
Filter 实现Filter接口 一般用于完成通用的操作,如:登陆验证.统一编码处理.敏感字符过滤等 执行流程 执行过滤器 执行放行后的资源 继续执行过滤器放行代码下的代码 配置 拦截路径配置 注解 ...
- 轻松精通awk数组企业问题案例
考试题1:处理以下文件内容,将域名取出并根据域名进行计数排序处理:(百度和sohu面试题) oldboy.log http://www.etiantian.org/index.html http:// ...
- vue前端开发那些事（1）
如上图所示,用vue开发一个小型网站所涉及到的知识点.这只是前端部分已经这么多了.接下来我分解开来说. 1.Node 当我们开发vue项目的时候,首先要安装Node.js,那么我们即使当时不理解为什么 ...
- 排序（sortb）
题目描述 懒得写题目背景了,就不写了. 有一个 $0, 1 \dots n − 1$ 的排列 $p_1, p_2 \dots p_n$,如果 $p_i ⊕ p_j ≤ a$(其中 $⊕$ 为按位异或) ...
- NOIP2017赛前模拟11月4日总结：
第一次挂0·····有点感伤···主要是因为时间分配太不合理了··花2个半小时搞第一题最后还wa完了··第二题很简单花了30分钟打完但没打对拍结果wa完···第三题暴力可以拿20分的但没时间打了··· ...
- 手把手搭建一个完整的javaweb项目
手把手搭建一个完整的javaweb项目 本案例使用Servlet+jsp制作,用MyEclipse和Mysql数据库进行搭建,详细介绍了搭建过程及知识点. 下载地址:http://download.c ...
- python的pip安装
http://blog.csdn.net/liuchunming033/article/details/39578019
- js判断变量类型,类型转换,
1.typeof 操作符 主要检测基础数据类型 var a="zhangqian"; var b=true; ; var d; var e=null; var f=new Obje ...
- img 标签下多余空白的解决方法
在浏览器中,图片默认的vertical-align是baseline.那么,我们该如何去掉这多余的空白呢? 1)将图片转换为块级 img{display:block;} 2) 设置图片的垂直对齐方式 ...
- xpath和CSS选择器
.content是二进制 用来处理声音.图片.视频 .text是文本 xpath语法: /一层层查找 //不固定位置 //title/text() @选取属性 [@href]和[@href=''] . ...