js實(shí)現(xiàn)遮罩層劃出效果是生成div而不是顯示
同遮蓋層劃入一樣,單純的遮蓋層劃出的話算的上是非常簡(jiǎn)單了,但是在這里它卻就不這么簡(jiǎn)單了,而且我前面還選了個(gè)比較麻煩的生成div,而不是顯示存在的div,這里有那么幾點(diǎn)需要特別注意:
1、遮蓋層出現(xiàn)后,鼠標(biāo)哪怕不動(dòng),也已經(jīng)是在遮蓋層上,已經(jīng)不再給出的div區(qū)域了,所以注意監(jiān)聽的位置;
2、onmouseout和onmouseover都是瞬時(shí)觸發(fā)的,這點(diǎn)很重要;
3、在實(shí)際應(yīng)用中,已存在的div的顯示比臨時(shí)創(chuàng)建肯定要有效的多;
這樣我還是上一下代碼吧,其實(shí)之前的地方?jīng)]怎么變,我只記錄改變的地方,那就是onmouseout監(jiān)聽加在了哪呢?
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)聽的判斷與之前的劃入幾乎如出一轍 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)單的看的話確實(shí)已經(jīng)有其形了,但是不得不說,這是個(gè)拙劣到了極點(diǎn)的實(shí)現(xiàn),還有多少點(diǎn)是還沒有加入的,還有多少情況是還沒有考慮到的,另外,這代碼的重復(fù)編寫,優(yōu)化優(yōu)化,喏喏...
相關(guān)文章
基于iScroll實(shí)現(xiàn)內(nèi)容滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了基于iScroll實(shí)現(xiàn)內(nèi)容滾動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-03-03js實(shí)現(xiàn)數(shù)組和對(duì)象的深淺拷貝
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)數(shù)組和對(duì)象的深淺拷貝,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09uniapp微信小程序獲取當(dāng)前定位城市信息的實(shí)例代碼
因?yàn)閡niapp官網(wǎng)文檔的定位功能,只能提供經(jīng)緯度,如果要獲取當(dāng)前具體的位置信息,必須要調(diào)取官方的地圖方法,然后在地圖上選點(diǎn),下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序獲取當(dāng)前定位城市信息的相關(guān)資料,需要的朋友可以參考下2022-08-08前端圖片懶加載(lazyload)的實(shí)現(xiàn)方法(提高用戶體驗(yàn))
圖片懶加載又稱圖片延時(shí)加載、惰性加載,即在用戶需要使用圖片的時(shí)候加載,這樣可以減少請(qǐng)求,節(jié)省帶寬,提高頁(yè)面加載速度,相對(duì)的,也能減少服務(wù)器壓力,下面通過本文給大家分享圖片懶加載lazyload的實(shí)現(xiàn)方法,感興趣的朋友一起看看吧2017-08-08Jquery代碼實(shí)現(xiàn)圖片輪播效果(一)
經(jīng)理交給我一個(gè)網(wǎng)站新聞資訊網(wǎng)頁(yè)開發(fā)的活兒,對(duì)于我這樣的java程序員,沒有接觸過網(wǎng)頁(yè)設(shè)計(jì)這么高端的東東,該怎么搞呢,去度娘那搜索到不少結(jié)果,而且很大部分都是用jquery做的,于是根據(jù)自己的一些的理解,提供了這篇jquery輪播效果的講解,有需要的朋友可以來參考下2015-08-08IOS中safari下的select下拉菜單文字過長(zhǎng)不換行的解決方法
今天在項(xiàng)目開發(fā)中遇到一個(gè)問題safari下的select下拉菜單文字過長(zhǎng)不換行問題,最終我用<optgroup>標(biāo)簽解決此問題,下面小編把實(shí)現(xiàn)思路分享給大家供大家參考2016-09-09