发现今天居然没有要写，那我就写写之前做的笔记吧。
这是事件的深入：
拖拽逻辑：
第一个： 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>