欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)遮罩層劃出效果是生成div而不是顯示

 更新時(shí)間:2014年07月29日 09:18:17   投稿:whsnow  
單純的遮蓋層劃出是比較簡(jiǎn)單的,而本例介紹的這個(gè)就有點(diǎn)難度,生成div,而不是顯示存在的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)文章

  • 淺析JavaScript聲明變量

    淺析JavaScript聲明變量

    JavaScript的變量聲明語句無論出現(xiàn)在何處,都會(huì)先于其他代碼首先被執(zhí)行,本文給大家介紹javascript聲明變量相關(guān)知識(shí),感興趣的朋友一起學(xué)習(xí)吧
    2015-12-12
  • 基于iScroll實(shí)現(xiàn)內(nèi)容滾動(dòng)效果

    基于iScroll實(shí)現(xiàn)內(nèi)容滾動(dòng)效果

    這篇文章主要為大家詳細(xì)介紹了基于iScroll實(shí)現(xiàn)內(nèi)容滾動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-03-03
  • js實(shí)現(xiàn)數(shù)組和對(duì)象的深淺拷貝

    js實(shí)現(xiàn)數(shù)組和對(duì)象的深淺拷貝

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)數(shù)組和對(duì)象的深淺拷貝,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-09-09
  • uniapp微信小程序獲取當(dāng)前定位城市信息的實(shí)例代碼

    uniapp微信小程序獲取當(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
  • 深入了解JavaScript 防抖和節(jié)流

    深入了解JavaScript 防抖和節(jié)流

    這篇文章主要介紹了JavaScript 防抖和節(jié)流,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-09-09
  • webpack該如何打包(打包流程)

    webpack該如何打包(打包流程)

    這篇文章主要介紹了webpack該如何打包及打包流程,本文通過圖文示例相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
    2023-12-12
  • 前端圖片懶加載(lazyload)的實(shí)現(xiàn)方法(提高用戶體驗(yàn))

    前端圖片懶加載(lazyload)的實(shí)現(xiàn)方法(提高用戶體驗(yàn))

    圖片懶加載又稱圖片延時(shí)加載、惰性加載,即在用戶需要使用圖片的時(shí)候加載,這樣可以減少請(qǐng)求,節(jié)省帶寬,提高頁(yè)面加載速度,相對(duì)的,也能減少服務(wù)器壓力,下面通過本文給大家分享圖片懶加載lazyload的實(shí)現(xiàn)方法,感興趣的朋友一起看看吧
    2017-08-08
  • Jquery代碼實(shí)現(xiàn)圖片輪播效果(一)

    Jquery代碼實(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-08
  • IOS中safari下的select下拉菜單文字過長(zhǎng)不換行的解決方法

    IOS中safari下的select下拉菜單文字過長(zhǎng)不換行的解決方法

    今天在項(xiàng)目開發(fā)中遇到一個(gè)問題safari下的select下拉菜單文字過長(zhǎng)不換行問題,最終我用<optgroup>標(biāo)簽解決此問題,下面小編把實(shí)現(xiàn)思路分享給大家供大家參考
    2016-09-09
  • Bootstrap CSS布局之列表

    Bootstrap CSS布局之列表

    這篇文章主要為大家詳細(xì)介紹了Bootstrap CSS布局之列表的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-12-12

最新評(píng)論