首页 > 代码库 > javascript基础08

javascript基础08

发现今天居然没有要写,那我就写写之前做的笔记吧。

这是事件的深入:

拖拽逻辑:

第一个: onm ousedown : 选择元素

第二个: onm ousemove : 移动元素

第三个:onmouseup : 释放元素

 

各浏览器在拖拽上都有问题;就是选中文字,就会产生问题

原因:当鼠标按下的时候选中文字就可以拖拽文字,这是浏览器的默认行为;

解决:阻止默认行为 -》在onmousedown时return false;

ie8以下无效;

ie8以下 :

obj.setCapture(); 设置全局捕获,当我们给一个元素设置全局捕获以后,

那么这个意思就会监听后续触发生的所有事件,当有事件发生时候,就会被当前设置

了全局捕获的元素所触发

ie: 有,且效果

ff:有,但没有效果

非标准下ie :

obj.setCapture(); 可以是只执行目标函数,实现到不自动选中文字

//只执行一次,要不在函数里被调用会出现不断执行的怪事。

执行当前对象的所有的事件函数的一次,无论事件在哪被执行。

对应的释放全局捕获

obj.releaseCapture();

可以使用其来在ie里阻止默认行为

 

碰撞检测

在web里是没有真正的碰撞的;只是边界的重合检测

九宫格的思路方式,检测边界重合

排除不能重合的情况 使用或 ||

 

每日一推:

作业题:

在做时想到看到一个事情,就是都是运动,那能不能把运动都封装起来了,所以就做了个运动的封装。

运动代码:

/*使用调用,obj对象,attr属性,speed速度,想达到的值,回调函数*//*因为运动基本都是px为单位的,至于透明度是没有单位,所以在这里把它分开了,    其实也没有怎么改,就是判断是不是透明度这个属性,然后走透明度这条线*/        function doMove(obj,attr,speed,iTarget,fn){            if(attr=="opacity"){                obj.len=iTarget-parseFloat(getStyle(obj,"opacity"))*100;            }else{                obj.len=iTarget-parseFloat(getStyle(obj,attr));            }            /*这里判断方向,在初始点后的为负数,在初始点前为正数*/            speed=obj.len>0?speed:-speed;            clearInterval(obj.timer);            obj.timer=setInterval(function(){                if(!obj.num){                    obj.num=0;                }                if(attr=="opacity"){                    obj.num=parseFloat(getStyle(obj,attr))*100+speed;                }else{                    obj.num=parseInt(getStyle(obj,attr))+speed;                }                /*这里是判断到了目标点没有,到了就停止定时器*/                if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){                    obj.num=iTarget;                    clearInterval(obj.timer);                    fn && fn();                }                if(attr=="opacity"){                    obj.style[attr]=obj.num/100;                }else{                    obj.style[attr]=obj.num+"px";                }            },30);        }        /*获取css属性值的,会获取表现出现的值*/        function getStyle(obj,attr){            return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];        }

后面题目的运动都是套用这个运动代码的。

第一题

技术分享

代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        #imgBox{            list-style: none;            padding: 0;            margin: 0;            overflow: hidden;        }        #imgBox li{            position: relative;            float: left;             width: 400px;            height: 285px;            margin-left: 10px;            margin-top: 10px;            overflow: hidden;            opacity: 1;        }        #imgBox li img {            width: 400px;            height: 285px;        }        #imgBox li p{            position: absolute;            top: 45%;            left: -125px;            font-size: 20px;            width: 120px;            text-align: center;            line-height: 40px;            border:2px solid #ff7600;            background: rgba(0,0,0,0.6);            color: #fff;            font-weight: bold;            border-radius: 15px;            z-index: 5;        }        #imgBox li .mask,#imgBox li .Bubble{            position: absolute;            top: 0;            left: 0;            width: 100%;            height: 100%;        }        #imgBox li .Bubble{            z-index: 10;        }        #imgBox li .mask{            background: #000;            opacity: 0;            filter: alpha(opacity:40);        }    </style>    <script type="text/javascript" src="doMove.js"></script>    <script type="text/javascript">                window.onload=function(){            var aLi=document.getElementsByTagName("li");            for(var i=0;i<aLi.length;i++){             start(i);            }        }        /*写成页面小组件,然后循环套用即可,index就是下标,只要获取li的下标        传参进出,就可以了        */        function start(index){        var aLi=document.getElementsByTagName("li");        var oMask=aLi[index].querySelector(".mask");        var oP=aLi[index].querySelector(".text");        var oBubble=aLi[index].querySelector(".Bubble");        var w=aLi[index].offsetWidth;        var w1=w-oP.offsetWidth;            oBubble.onmouseover=function(){                    oP.style.display="block";                    oP.style.left=-oP.offsetWidth+px;                        doMove(oMask,"opacity",4,40);                    doMove(oP,"left",10,w1);            }            oBubble.onmouseout=function(){                doMove(oMask,"opacity",4,0);                if(parseInt(oP.style.left)<w1){                        oP.style.left=-oP.offsetWidth+px;                        oP.style.display="none";                }else{                    doMove(oP,"left",10,w);                }            }        }        </script></head><body>    <ul id="imgBox">        <li><img src="./img/1.jpg" alt=""><p class="text">dessert</p><div class="mask"></div><div class="Bubble"></div></li>        <li><img src="./img/2.jpeg" alt=""><p class="text">dessert</p><div class="mask"></div><div class="Bubble"></div></li>        <li><img src="./img/3.jpg" alt=""><p class="text">dessert</p><div class="mask"></div><div class="Bubble"></div></li>        <li><img src="./img/4.jpg" alt=""><p class="text">dessert</p><div class="mask"></div><div class="Bubble"></div></li>        <li><img src="./img/5.jpg" alt=""><p class="text">dessert</p><div class="mask"></div><div class="Bubble"></div></li>        <li><img src="./img/6.jpeg" alt=""><p class="text">dessert</p><div class="mask"></div><div class="Bubble"></div></li>    </ul></body></html>

第二题:

技术分享

代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>海贼王</title>    <!-- 这是基于html5做的,使用了HTML5里的disabled这个属性 -->    <script type="text/javascript" src="doMove.js"></script>    <script type="text/javascript">        window.onload=function(){            /*获取最外层的盒子,指的是包着这些内容,自己定义的盒子*/            var oImgBox=document.querySelector(".imgBox");            /*调用函数*/            pull(oImgBox);        }        function pull(obj){            /*默认速度,慢*/            var speed=1;            /*获取元素*/            var oBtn=obj.querySelectorAll(".btnG input[type=‘button‘]"),                oImg=obj.querySelector("img"),                oMask=obj.querySelector(".mask"),                aBtn=obj.querySelectorAll(".speed-btnG input[type=‘button‘]"),                aCount=obj.querySelectorAll(".count span"),                /*获取遮罩层初始高度*/                dh=oMask.offsetHeight,                /*获取图片高度*/                h=oImg.offsetHeight;                /*设置空变量预备装定时器(每个定时器都有一个id,而定时器返回的值就是这个id)*/                obj.timer=null;                /*获取图片高度,返回到页面的显示出来*/                aCount[1].innerHTML=h;                /*开档,快中慢*/                for(var i=0;i<aBtn.length;i++){                    aBtn[i].index=i;                    aBtn[i].onclick=function(){                        speed=1;                        for(var j=0;j<this.index;j++){                            speed+=5;                        }                    }                }                /*开定时器是为了监听高度的变化,然后把高度返回到页面*/                clearInterval(obj.timer);                obj.timer=setInterval(function(){                    obj.h1=parseInt(getStyle(oMask,"height"));                    if(obj.h){                            if(obj.h==obj.h1){                                aCount[0].innerHTML=obj.h;                            }else{                                obj.h=obj.h1;                            }                        }else{                            obj.h=obj.h1;                        }                        },10);                /*点击打开的点击事件*/                oBtn[0].onclick=function(){                    this.disabled=true;                    oBtn[1].disabled="";                    doMove(oMask,"height",speed,h);                }                /*点击关闭的点击事件*/                oBtn[1].onclick=function(){                    this.disabled=true;                    oBtn[0].disabled="";                    doMove(oMask,"height",speed,dh);                }        }    </script>    <style>        #container{            margin: 0 auto;            border:1px solid #888;            padding: 10px;            width: 300px;        }        #container .imgBox{            position: relative;        }        #container .count{            position: absolute;            top: 0;            left: 125px;            margin: 0;            z-index: 10;            color: #778899;        }        #container img{            width: 300px;            height: 500px;            display: block;        }        #container .mask{            position: absolute;            bottom: 0;            left: 0;            background: #fff;            width: 100%;            height: 35px;        }        #container .btnG{            position: absolute;            top: 20px;            left: 105px;        }        .speed-btnG{            position: absolute;            bottom: -45px;            left: 35%;        }    </style></head><body>    <div id="container">        <div class="imgBox">            <p class="count"><span>100</span>/<span>500</span></p>            <img src="./img/hzw.jpg" alt="">            <div class="mask">                <div class="btnG">                    <input type="button" value="打开">                    <input type="button" value="关闭" disabled>                </div>            </div>            <div class="speed-btnG">                <input type="button" value="慢">                <input type="button" value="中">                <input type="button" value="快">            </div>        </div>    </div></body></html>

第三题:

技术分享

代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>颜色表</title>    <script type="text/javascript">        window.onload=function(){            /*create(第一个参数,第二个参数)            *第一个参数:表格的宽度            *第二个参数:颜色的数量(这个数量是(255/参数)向上取整后得到的数字num            ,然后这个数字三次方得到的值就是颜色数量了)            不过由于最后一行如果不能形成一行的宽度,就会删除掉这行,所以表现出来的            颜色数量很可能会少一些            */            // 调用函数,传入参数,实现一步到位颜色表喔~~            // 妈妈再也不担心重复操作出错了            create(40,40);        }        /*创建表格,和别的元素*/        function create(len,amount){            var table=document.createElement("table");            var p1=document.createElement("p");            var p2=document.createElement("p");            var num=0;            var count=Math.floor(colorBox(amount).length/len);            table.id="color-table";            p1.className="color-code";            p2.className="color-code";            p1.innerHTML="颜色代码:RGB(0,0,0)";            p2.innerHTML="颜色代码:#000000";            for(var i=0;i<count;i++){            var    tr=document.createElement("tr");            for(var j=0;j<len;j++){                var    td=document.createElement("td");                    td.index=++num;                    td.style.background="rgb("+colorBox(amount)[num]+")";                    td.onclick=function(){                        document.body.style.background="rgb("+colorBox(amount)[this.index]+")";                        var arr=colorBox(amount)[this.index].split(",");                        for(var i=0;i<arr.length;i++){                            arr[i]=Number(arr[i]).toString(16);                            if(arr[i].length<2){                                arr[i]="0"+arr[i];                            }                        }                        p1.innerHTML="颜色代码:RGB("+colorBox(amount)[this.index]+")";                        p2.innerHTML="颜色代码:#"+arr.join("");                    }                    tr.appendChild(td);                }                table.appendChild(tr);            }        document.body.appendChild(table);        document.body.appendChild(p1);        document.body.appendChild(p2);        }        /*颜色代码数据的存储*/        function colorBox(num){            var box=[];            for(var i=0;i<=255;i+=num){                for(var j=0;j<=255;j+=num){                    for(var z=0;z<=255;z+=num){                        box.push(i+","+j+","+z);                    }                }            }            return box;        }    </script>    <style>    h1{        width: 100px;        margin: 0 auto;    }        #color-table{            margin: 0 auto;        }        td{            display: inline-block;            margin: 2px;            cursor: pointer;            border:1px solid #000;            width: 10px;            height: 10px;            padding: 5px;        }        .color-code{            width: 330px;            margin: 20px auto 0;            font-weight: bold;            background: #fff;            height: 30px;            color: #00BFFF;            text-align: center;            font-size: 20px;            line-height: 30px;            border-radius: 20px;        }    </style></head><body>    <h1>颜色表</h1></body></html>

 

javascript基础08