使用原生JavaScript設計和實現Tooltip浮動提示框特效,了解代碼簡化、事件綁定、事件冒泡等技巧和知識。

特效四個關鍵點:
顯示:鼠標移到ToolTip超鏈接上時,ToolTip提示框可以顯示出來
隱藏:鼠標移開時,ToolTip提示框自動隱藏
定位:ToolTip提示框的位置需要根據ToolTip超鏈接的位置來設置
可配置:ToolTip提示框可以根據參數不同,改變尺寸和顯示內容
注意點:
1)border-radius和 box-shadow兼容寫法
2)不論鼠標指針穿過被選元素或其子元素,都會觸發 mouseover 事件。對應mouseout
只有在鼠標指針穿過被選元素時,才會觸發 mouseenter 事件。對應mouseleave
3)W3C規定不允許內聯元素嵌套塊級元素 ,其中的a鏈接嵌套了div,可能不符合W3C標準( tip:他是移入a鏈接的時候在a鏈接中創建的div )
簡單的函數封裝寫法(便于引用,縮短代碼量):
1)通過元素的id獲得元素的DOM引用
var $ = function(id){
return document.getElementById(id);
}另外有需要云服務器可以了解下創新互聯建站www.yijiale78.com,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案,具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢,專為企業上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
分享文章:原生JavaScript實現Tooltip浮動提示框特效-創新互聯
文章網址:http://www.yijiale78.com/article42/cspiec.html
成都網站建設公司_創新互聯,為您提供關鍵詞優化、品牌網站建設、網站設計公司、網站排名、網站制作、軟件開發
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯