javascript基础08
Posted 小数点就是问题
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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].o以上是关于javascript基础08的主要内容，如果未能解决你的问题，请参考以下文章
VSCode自定义代码片段12——JavaScript的Promise对象