ife2015-task2-4-5

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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的主要内容，如果未能解决你的问题，请参考以下文章
 

 IFE-29 笔记


 如何从2个列表中删除重复的元素并形成字典


 IFE-20 笔记


 IFE-8笔记 响应式网格布局


 IFE-22 二叉树遍历


 ife2015-task2