js實(shí)現(xiàn)遮罩層劃出效果是生成div而不是顯示
同遮蓋層劃入一樣,單純的遮蓋層劃出的話(huà)算的上是非常簡(jiǎn)單了,但是在這里它卻就不這么簡(jiǎn)單了,而且我前面還選了個(gè)比較麻煩的生成div,而不是顯示存在的div,這里有那么幾點(diǎn)需要特別注意:
1、遮蓋層出現(xiàn)后,鼠標(biāo)哪怕不動(dòng),也已經(jīng)是在遮蓋層上,已經(jīng)不再給出的div區(qū)域了,所以注意監(jiān)聽(tīng)的位置;
2、onmouseout和onmouseover都是瞬時(shí)觸發(fā)的,這點(diǎn)很重要;
3、在實(shí)際應(yīng)用中,已存在的div的顯示比臨時(shí)創(chuàng)建肯定要有效的多;
這樣我還是上一下代碼吧,其實(shí)之前的地方?jīng)]怎么變,我只記錄改變的地方,那就是onmouseout監(jiān)聽(tīng)加在了哪呢?
var getOneDiv=function(){
var div=document.createElement("div");
div.style.position="absolute";
div.style.display="block";
div.style.zIndex="10";
div.style.background="yellow";
div.addEventListener("mouseout",function(event){//我把它加在了這里,而這里監(jiān)聽(tīng)的判斷與之前的劃入幾乎如出一轍
var x=event.clientX;
var y=event.clientY;
left=x-test.offsetLeft;
top=y-test.offsetTop;
right=test.offsetLeft+test.offsetWidth-x;
bottom=test.offsetTop+test.offsetHeight-y;
arr=[];
arr.push(top);
arr.push(right);
arr.push(bottom);
arr.push(left);
var least=findLeast(arr);
if(least==1){
}
if(least==2){//還是距離和寬度的同時(shí)改變啊
div.style.left=test.offsetLeft+"px";
div.style.top=test.offsetTop+"px";
div.style.height=test.offsetHeight+"px";
div.style.width=width+"px";
var changeWidth2=setInterval(function(){
if(div.offsetLeft>=test.offsetLeft+test.offsetWidth){
clearInterval(changeWidth2);
check=true;//關(guān)鍵點(diǎn)
}else{
marginLeft=marginLeft+10;
width=width-10;
div.style.width=width+"px";
div.style.left=marginLeft+"px";
}
},30);
}
if(least==3){
}
if(least==4){//向左劃出,width作為全局變量,這次就是不斷減小了
div.style.left=test.offsetLeft+"px";
div.style.top=test.offsetTop+"px";
div.style.height=test.offsetHeight+"px";
div.style.width=width+"px";
var changeWidth1=setInterval(function(){
if(div.offsetWidth<=0){
clearInterval(changeWidth1);
check=true;//這里也比較關(guān)鍵哦
}else{
width=width-10;
div.style.width=width+"px";
}
},30);
}
})
return div;
}
就這樣簡(jiǎn)單的都實(shí)現(xiàn)了劃出劃入的效果,簡(jiǎn)單的看的話(huà)確實(shí)已經(jīng)有其形了,但是不得不說(shuō),這是個(gè)拙劣到了極點(diǎn)的實(shí)現(xiàn),還有多少點(diǎn)是還沒(méi)有加入的,還有多少情況是還沒(méi)有考慮到的,另外,這代碼的重復(fù)編寫(xiě),優(yōu)化優(yōu)化,喏喏...
相關(guān)文章
js 計(jì)算圖片內(nèi)點(diǎn)個(gè)數(shù)的示例代碼
這篇文章主要介紹了js 計(jì)算圖片內(nèi)點(diǎn)個(gè)數(shù)的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
javascript簡(jiǎn)單實(shí)現(xiàn)表格行間隔顯示顏色并高亮顯示
表格行間隔顯示顏色并實(shí)現(xiàn)高亮顯示,這種效果大家都有見(jiàn)到過(guò)吧,下面就為大家詳細(xì)介紹下,需要的朋友可不要錯(cuò)過(guò)2013-11-11
使用CoffeeScrip優(yōu)美方式編寫(xiě)javascript代碼
CoffeeScript就是JavaScript,他進(jìn)行的是一對(duì)一的編譯,或者說(shuō)是翻譯,而且編譯成的JavaScript代碼可讀性很強(qiáng)。本文給大家介紹使用CoffeeScript優(yōu)美方式編寫(xiě)javascript代碼,感興趣的朋友一起看看吧2015-10-10
詳解js創(chuàng)建對(duì)象的幾種方式和對(duì)象方法
這篇文章主要介紹了詳解js創(chuàng)建對(duì)象的幾種方式和對(duì)象方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
JavaScript給事件委托批量添加事件監(jiān)聽(tīng)詳細(xì)流程
事件委托,一般來(lái)講,會(huì)把一個(gè)或者一組元素的事件委托到它的父層或者更外層元素上,真正綁定事件的是外層元素,當(dāng)事件響應(yīng)到需要綁定的元素上時(shí),會(huì)通過(guò)事件冒泡機(jī)制從而觸發(fā)它的外層元素的綁定事件上,然后在外層元素上去執(zhí)行函數(shù)2021-10-10
BootStrap Validator對(duì)于隱藏域驗(yàn)證和程序賦值即時(shí)驗(yàn)證的問(wèn)題淺析
這篇文章主要介紹了BootStrap Validator對(duì)于隱藏域驗(yàn)證和程序賦值即時(shí)驗(yàn)證的問(wèn)題的解決方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12
uni-app全局變量的四種實(shí)現(xiàn)方式總結(jié)
在開(kāi)發(fā)的過(guò)程中,我們不可避免的用到全局變量,比如我們的請(qǐng)求的公共路徑這個(gè)變量,下面這篇文章主要給大家總結(jié)介紹了關(guān)于uni-app全局變量的四種實(shí)現(xiàn)方式,需要的朋友可以參考下2023-10-10

