JS實(shí)現(xiàn)的模仿QQ頭像資料卡顯示與隱藏效果
本文實(shí)例講述了JS實(shí)現(xiàn)的模仿QQ頭像資料卡顯示與隱藏效果。分享給大家供大家參考，具體如下：
我們使用QQ時(shí)經(jīng)常需要查看朋友的資料卡，當(dāng)我們把鼠標(biāo)移入頭像時(shí)，資料卡顯示，并且鼠標(biāo)能在頭像與資料卡之間能隨意移動，當(dāng)鼠標(biāo)移出頭像或資料卡時(shí)，資料卡延時(shí)隱藏。
實(shí)質(zhì)就是延時(shí)提示框問題！
首先寫好布局：
<style>
div { float:left; margin:5px; }
.head { width:50px;height:50px;background-color:pink; }
.info { width:250px;height:200px;background-color:blue;display:none; }
</style>
<div>
<div class="head"></div>
<div class="info"></div>
</div>
其次js部分：
思路：
（1）鼠標(biāo)移入頭像，資料卡顯示；鼠標(biāo)移出頭像，資料卡延時(shí)隱藏setTimeout
（2）鼠標(biāo)移入資料卡，資料卡仍顯示，并清除資料卡延時(shí)隱藏的變量
（3）鼠標(biāo)移出資料卡，資料卡延時(shí)隱藏，并且此時(shí)如果在移入到頭像中，資料卡扔顯示，并清除資料卡延時(shí)隱藏的變量
window.onload =function(){
var oHead = document.getElementsByClassName("head")[0];
var oInfo = document.getElementsByClassName("info")[0];
var timer = null;
oHead.onmouseover=function(){
clearTimeout(timer);
oInfo.style.display="block";
};
oHead.onmouseout=function(){
timer = setTimeout(function(){
oInfo.style.display="none";
},500);
};
oInfo.onmouseover=function(){
clearTimeout(timer);
oInfo.style.display="block";
};
oInfo.onmouseout=function(){
timer = setTimeout(function(){
oInfo.style.display="none";
},500);
};
};
優(yōu)化代碼：
oInfo.onmouseover = oHead.onmouseover=function(){
clearTimeout(timer);
oInfo.style.display="block";
};
oInfo.onmouseout = oHead.onmouseout=function(){
timer = setTimeout(function(){
oInfo.style.display="none";
},500);
};
函數(shù)封裝：
注意：事件 .xx 等于 [“xx”]
第一種：函數(shù)外獲取變量，調(diào)用函數(shù)，適用于一個(gè)或兩個(gè)元素調(diào)用此事件
window.onload =function(){
var oHead = document.getElementsByClassName("head")[0];
var oInfo = document.getElementsByClassName("info")[0];
reminder(oHead,oInfo,"onmouseover","onmouseout");
function reminder (div1,div2,event1,event2){
var timer = null;
div1[event1] = div2[event1]=function(){
clearTimeout(timer);
div2.style.display="block";
};
div1[event2] = div2[event2]=function(){
timer = setTimeout(function(){
div2.style.display="none";
},500);
};
}
};
第二種：函數(shù)外獲取變量，調(diào)用函數(shù)，適用于多個(gè)元素調(diào)用此事件
window.onload =function(){
var number=0;
reminder("head","info","onmouseover","onmouseout",number);
function reminder (div1,div2,event1,event2,num){
var oHead = document.getElementsByClassName(div1)[num];
var oInfo = document.getElementsByClassName(div2)[num];
var timer = null;
oHead[event1] = oInfo[event1]=function(){
clearTimeout(timer);
oInfo.style.display="block";
};
oHead[event2] = oInfo[event2]=function(){
timer = setTimeout(function(){
oInfo.style.display="none";
},500);
};
}
};
比如，一共有三個(gè)頭像的話，就可以用for循環(huán)遍歷為每個(gè)元素綁定事件：
var number=null;
for(number=0;number<3;number++){
reminder("head","info","onmouseover","onmouseout",number);
}
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
- 原生JS仿QQ閱讀點(diǎn)擊展開、收起效果
- JS實(shí)現(xiàn)的仿QQ空間圖片彈出效果代碼
- js實(shí)現(xiàn)仿qq消息的彈出窗效果
- JS實(shí)現(xiàn)超簡單的仿QQ折疊菜單效果
- JS實(shí)現(xiàn)仿QQ面板的手風(fēng)琴效果折疊菜單代碼
- js實(shí)現(xiàn)帶緩沖效果的仿QQ面板折疊菜單代碼
- JS實(shí)現(xiàn)仿QQ聊天窗口抖動特效
- 純js實(shí)現(xiàn)仿QQ郵箱彈出確認(rèn)框
- 基于zepto.js實(shí)現(xiàn)仿手機(jī)QQ空間的大圖查看組件ImageView.js詳解
- javascript仿qq界面的折疊菜單實(shí)現(xiàn)代碼
- js設(shè)置控件的隱藏與顯示的兩種方法
- js菜單點(diǎn)擊顯示或隱藏效果的簡單實(shí)例
- javascript 控制 html元素 顯示/隱藏實(shí)現(xiàn)代碼
相關(guān)文章
JavaScript實(shí)現(xiàn)的MD5算法完整實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的MD5算法,以完整實(shí)例形式分析了基于JavaScript實(shí)現(xiàn)MD5算法的具體步驟與相關(guān)技巧,需要的朋友可以參考下2016-02-02
JavaScript隨機(jī)排序，自動抽取中文與英文字母，重新組合并隨機(jī)排序，生成隨機(jī)數(shù)很可以。2010-09-09
JS或jQuery獲取ASP.NET服務(wù)器控件ID的方法
這篇文章主要介紹了JS或jQuery獲取ASP.NET服務(wù)器控件ID的方法,本文介紹一方法,解決如何使用js獲取ASP.NET控件在瀏覽器端生成html標(biāo)簽對應(yīng)的id,需要的朋友可以參考下2015-06-06
用js實(shí)現(xiàn)的圖片生成效果代碼，學(xué)習(xí)js的朋友可以看看2008-04-04
這篇文章主要介紹了JavaScript跨域方法匯總,本文總結(jié)了12種JavaScript的跨域方法,需要的朋友可以參考下2014-10-10
本文給大家通過3個(gè)方法向大家展示了javascript中的setTimeout的使用，非常的簡單，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要向大家介紹了javascript事件冒泡，以及javascript阻止事件冒泡的實(shí)現(xiàn)代碼，感興趣的朋友可以參考一下2016-01-01
瀏覽器對象模型(BOM)是瀏覽器提供的JavaScript操作瀏覽器的API,提供了與網(wǎng)頁無關(guān)的瀏覽器功能對象,這篇文章主要給大家介紹了關(guān)于前端BOM操作常用命令詳解及代碼案例的相關(guān)資料,需要的朋友可以參考下2024-10-10
使用wxapp-img-loader自定義組件實(shí)現(xiàn)微信小程序圖片預(yù)加載功能
由于微信小程序沒有提供類似 Image 這樣的 JS 對象，要實(shí)現(xiàn)圖片的預(yù)加載要麻煩一些，wxapp-img-loader自定義組件可以在微信小程序中實(shí)現(xiàn)圖片預(yù)加載功能,需要的朋友可以參考下2018-10-10
js簡單實(shí)現(xiàn)豎向tab選項(xiàng)卡的方法
這篇文章主要介紹了js簡單實(shí)現(xiàn)豎向tab選項(xiàng)卡的方法,涉及javascript實(shí)現(xiàn)tab切換效果的相關(guān)技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-05-05