JS實(shí)現(xiàn)的模仿QQ頭像資料卡顯示與隱藏效果
本文實(shí)例講述了JS實(shí)現(xiàn)的模仿QQ頭像資料卡顯示與隱藏效果。分享給大家供大家參考，具體如下：
我們使用QQ時(shí)經(jīng)常需要查看朋友的資料卡，當(dāng)我們把鼠標(biāo)移入頭像時(shí)，資料卡顯示，并且鼠標(biāo)能在頭像與資料卡之間能隨意移動(dòng)，當(dāng)鼠標(biāo)移出頭像或資料卡時(shí)，資料卡延時(shí)隱藏。
實(shí)質(zhì)就是延時(shí)提示框問(wèn)題！
首先寫(xiě)好布局：
<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動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- 原生JS仿QQ閱讀點(diǎn)擊展開(kāi)、收起效果
- JS實(shí)現(xiàn)的仿QQ空間圖片彈出效果代碼
- js實(shí)現(xiàn)仿qq消息的彈出窗效果
- JS實(shí)現(xiàn)超簡(jiǎn)單的仿QQ折疊菜單效果
- JS實(shí)現(xiàn)仿QQ面板的手風(fēng)琴效果折疊菜單代碼
- js實(shí)現(xiàn)帶緩沖效果的仿QQ面板折疊菜單代碼
- JS實(shí)現(xiàn)仿QQ聊天窗口抖動(dòng)特效
- 純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)擊顯示或隱藏效果的簡(jiǎn)單實(shí)例
- javascript 控制 html元素 顯示/隱藏實(shí)現(xiàn)代碼
相關(guān)文章
JS代碼格式化和語(yǔ)法著色V2...2006-10-10
JS組件Bootstrap實(shí)現(xiàn)下拉菜單效果代碼
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap實(shí)現(xiàn)下拉菜單效果代碼，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了JavaScript中的Proxy-Reflect操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
javascript HTML+CSS實(shí)現(xiàn)經(jīng)典橙色導(dǎo)航菜單
這篇文章主要介紹了javascript HTML+CSS實(shí)現(xiàn)經(jīng)典橙色導(dǎo)航菜單的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02
asp.net webform中獲取服務(wù)器控件,js腳本獲取服務(wù)器控件需要使用ClientID，下面有個(gè)示例，大家可以參考下2014-05-05
JavaScript實(shí)現(xiàn)函數(shù)重載的代碼示例
在JavaScript中并沒(méi)有直接支持函數(shù)重載的機(jī)制,但是可以通過(guò)一些技巧來(lái)模擬函數(shù)重載的效果,比如使用參數(shù)判斷,使用默認(rèn)參數(shù),對(duì)象參數(shù),這些方法都可以實(shí)現(xiàn)類似函數(shù)重載的效果,所以本文就給大家介紹一下JavaScript如何實(shí)現(xiàn)函數(shù)重載,需要的朋友可以參考下2023-08-08
JavaScript中的垃圾回收機(jī)制負(fù)責(zé)自動(dòng)管理內(nèi)存，回收不再使用的對(duì)象所占用的內(nèi)存空間。本文主要介紹了JS中垃圾回收機(jī)制的相關(guān)知識(shí)，需要的可以參考一下2023-04-04
js常用方法及字符串的常用判斷方法都是在工作中經(jīng)常用到的，在本文整理了一些，感興趣的朋友可以參考下2013-10-10
console一定是各位前端最熟悉的小伙伴了,有些網(wǎng)站還會(huì)在控制臺(tái)輸出一些有意思的東西,下面這篇文章主要給大家介紹了關(guān)于前端console用法的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
如何利用Web Speech API之speechSynthesis實(shí)現(xiàn)文字轉(zhuǎn)語(yǔ)音功能
Web Speech API使你能夠?qū)⒄Z(yǔ)音數(shù)據(jù)合并到Web應(yīng)用程序中,SpeechSynthesisUtterance是HTML5中新增的API,用于將指定文字合成為對(duì)應(yīng)的語(yǔ)音,這篇文章主要介紹了利用Web Speech API之speechSynthesis實(shí)現(xiàn)文字轉(zhuǎn)語(yǔ)音功能,需要的朋友可以參考下2024-06-06