你的位置:首页 > Java教程

[Java教程]javascript基础08


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

这是事件的深入:

拖拽逻辑:

第一个: onmousedown : 选择元素

第二个: onmousemove : 移动元素

第三个: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>