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