您好,登錄后才能下訂單哦!
這篇文章主要介紹JS如何實現(xiàn)模仿QQ頭像資料卡顯示與隱藏效果,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
本文實例講述了JS實現(xiàn)的模仿QQ頭像資料卡顯示與隱藏效果。分享給大家供大家參考,具體如下:
我們使用QQ時經(jīng)常需要查看朋友的資料卡,當我們把鼠標移入頭像時,資料卡顯示,并且鼠標能在頭像與資料卡之間能隨意移動,當鼠標移出頭像或資料卡時,資料卡延時隱藏。
實質(zhì)就是延時提示框問題!
首先寫好布局:
<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)鼠標移入頭像,資料卡顯示;鼠標移出頭像,資料卡延時隱藏setTimeout
(2)鼠標移入資料卡,資料卡仍顯示,并清除資料卡延時隱藏的變量
(3)鼠標移出資料卡,資料卡延時隱藏,并且此時如果在移入到頭像中,資料卡扔顯示,并清除資料卡延時隱藏的變量
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ù),適用于一個或兩個元素調(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ù),適用于多個元素調(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); }; } };
比如,一共有三個頭像的話,就可以用for循環(huán)遍歷為每個元素綁定事件:
var number=null; for(number=0;number<3;number++){ reminder("head","info","onmouseover","onmouseout",number); }
以上是“JS如何實現(xiàn)模仿QQ頭像資料卡顯示與隱藏效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。