您好,登錄后才能下訂單哦!
使用原生JavaScript設(shè)計(jì)和實(shí)現(xiàn)Tooltip浮動(dòng)提示框特效,了解代碼簡(jiǎn)化、事件綁定、事件冒泡等技巧和知識(shí)。
特效四個(gè)關(guān)鍵點(diǎn):
顯示:鼠標(biāo)移到ToolTip超鏈接上時(shí),ToolTip提示框可以顯示出來(lái)
隱藏:鼠標(biāo)移開(kāi)時(shí),ToolTip提示框自動(dòng)隱藏
定位:ToolTip提示框的位置需要根據(jù)ToolTip超鏈接的位置來(lái)設(shè)置
可配置:ToolTip提示框可以根據(jù)參數(shù)不同,改變尺寸和顯示內(nèi)容
注意點(diǎn):
1)border-radius和 box-shadow兼容寫(xiě)法
2)不論鼠標(biāo)指針穿過(guò)被選元素或其子元素,都會(huì)觸發(fā) mouseover 事件。對(duì)應(yīng)mouseout
只有在鼠標(biāo)指針穿過(guò)被選元素時(shí),才會(huì)觸發(fā) mouseenter 事件。對(duì)應(yīng)mouseleave
3)W3C規(guī)定不允許內(nèi)聯(lián)元素嵌套塊級(jí)元素 ,其中的a鏈接嵌套了div,可能不符合W3C標(biāo)準(zhǔn)( tip:他是移入a鏈接的時(shí)候在a鏈接中創(chuàng)建的div )
簡(jiǎn)單的函數(shù)封裝寫(xiě)法(便于引用,縮短代碼量):
1)通過(guò)元素的id獲得元素的DOM引用
var $ = function(id){ return document.getElementById(id); }
2)綁定事件的函數(shù)
function addEvent(obj,event,fn){ //要綁定的元素對(duì)象,要綁定的事件,觸發(fā)的回調(diào)函數(shù) if(obj.addEventListener){ //非IE,支持冒泡和捕獲 obj.addEventListenner(event,fn,false); }else if(obj.attachEvent){ //IE,只支持冒泡 obj.attachEvent('on'+event,fn); } }
效果如圖:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> body{ font-size: 14px; line-height: 1.8; background: url("img/bg.jpg") no-repeat center top; font-family: "微軟雅黑"; } #demo{ width: 500px; margin: 30px auto; padding: 20px 30px; position: relative; background-color: #fff; border-radius: 10px; -moz-border-radius: 10px;/*這個(gè)屬性 主要是專門(mén)支持Mozilla Firefox 火狐瀏覽器的CSS屬性*/ -webkit-border-radius: 10px;/*蘋(píng)果;谷歌,等一些瀏覽器認(rèn),因?yàn)樗麄兌加玫氖莣ebkit內(nèi)核*/ box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2); } #demo h3{ color: #03f; } #demo .tooltip{ color: #03f; cursor: help; } .tooltip-box{ display: block; background: #fff; line-height: 1.6; border: 1px solid #66CCFF; color: #333; padding: 20px; font-size: 12px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; overflow: auto; } #mycard img{ float: left; width: 100px; height: 100px; padding: 10px; } #mycard p{ float: left; width: 150px; padding: 0 10px; } </style> <script type="text/javascript"> window.onload=function(){ //綁定事件的函數(shù) function addEvent(obj,event,fn){ //要綁定的元素對(duì)象,要綁定的事件,觸發(fā)的回調(diào)函數(shù) if(obj.addEventListener){ //非IE,支持冒泡和捕獲 obj.addEventListener(event,fn,false); }else if(obj.attachEvent){ //IE,只支持冒泡 obj.attachEvent('on'+event,fn); } } //通過(guò)用戶代理的方式判斷是否是IE的方法,不能判斷出IE11 var isIE = navigator.userAgent.indexOf("MSIE") > -1; var $ = function(id){ return document.getElementById(id); } var demo = $("demo"); //obj - ToolTip超鏈接元素 //id - ToolTip提示框id //html - ToolTip提示框HTML內(nèi)容 //width - ToolTip提示框?qū)挾龋蛇x) //height - ToolTip提示框高度(可選) function showTooltip(obj,id,html,width,height){ if($(id)==null){ //創(chuàng)建 <div class="tooltip-box" id="xx">xxxxxxxx</div> var toolTipBox; toolTipBox = document.createElement('div'); toolTipBox.className = "tooltip-box"; toolTipBox.id = id; toolTipBox.innerHTML = html; obj.appendChild(toolTipBox); toolTipBox.style.width = width ? width + 'px':"auto"; toolTipBox.style.height = height ? height + 'px':"auto"; if(!width && isIE){ toolTipBox.style.width = toolTipBox.offsetWidth;//因?yàn)镮E不支持auto屬性 } toolTipBox.style.position = 'absolute'; toolTipBox.style.display = 'block'; var left = obj.offsetLeft; var top = obj.offsetTop + 20; //當(dāng)瀏覽器窗口縮小時(shí)不讓提示框超出瀏覽器 if(left + toolTipBox.offsetWidth > document.body.clientWidth){ var demoLeft = demo.offsetLeft; left = document.body.clientWidth - toolTipBox.offsetWidth - demoLeft; if(left < 0) left = 0; } toolTipBox.style.left = left + 'px'; toolTipBox.style.top = top + 'px'; addEvent(obj,"mouseleave" ,function(){ setTimeout(function(){ $(id).style.display = 'none'; },300); }); } else{ //顯示 $(id).style.display = 'block'; } } //事件冒泡 addEvent(demo,'mouseover',function(e){ var event = e || window.event; var target = event.target || event.srcElement;//IE下,event對(duì)象有srcElement屬性,但是沒(méi)有target屬性; //Firefox下,event對(duì)象有target屬性,但是沒(méi)有srcElement屬性.但他們的作用是相當(dāng)?shù)? //event.srcElement:表示的當(dāng)前的這個(gè)事件源。 if(target.className == "tooltip"){ var _html; var _id; var _width = 200; switch (target.id){ case "tooltip1": _id = "t1"; _html = "中華人民共和國(guó)"; break; case "tooltip2": _id = "t2"; _html = "美國(guó)籃球職業(yè)聯(lián)賽"; break; case "tooltip3": _id = "t3"; _html = "<h3>春曉</h3><p>春眠不覺(jué)曉,</p><p>處處聞啼鳥(niǎo)。</p><p>夜來(lái)風(fēng)雨聲,</p><p>花落知多少。</p>"; _width = 100; break; case "tooltip4": _id = "t4"; _html = "<img src='img/1.jpg' width='500' /> "; _width = 520; break; case "tooltip5": _id = "t5"; _html = "<div id='mycard'><img src='img/2.jpg' alt=''/><p><strong>昵稱一定要長(zhǎng)</strong></p><p>我的簡(jiǎn)介我的簡(jiǎn)介</p></div>"; _width = 300; break; case "tooltip6": _id = "t6"; _html = "<iframe src='http://www.imooc.com/' width='480' height='300'></iframe>"; _width = 500; break; } showTooltip(target,_id,_html,_width); } }); /* var t1 = $("tooltip1"); var t2 = $("tooltip2"); var t3 = $("tooltip3"); var t4 = $("tooltip4"); var t5 = $("tooltip5"); var t6 = $("tooltip6"); t1.onmouseenter = function () { showTooltip(this, "t1", '中華人民共和國(guó)', 200); }; t2.onmouseenter = function () { showTooltip(this, "t2", '美國(guó)籃球職業(yè)聯(lián)賽', 200); }; t3.onmouseenter = function () { showTooltip(this, "t3", '<h3>春曉</h3><p>春眠不覺(jué)曉,</p><p>處處聞啼鳥(niǎo)。</p><p>夜來(lái)風(fēng)雨聲,</p><p>花落知多少。</p>', 100); }; t4.onmouseenter = function () { showTooltip(this, "t4", '<img src="img/1.jpg" width="500" /> ', 520); }; t5.onmouseenter = function () { var _html = '<div id="mycard"><img src="img/2.jpg" alt=""/><p><strong>昵稱一定要長(zhǎng)</strong></p><p>我的簡(jiǎn)介我的簡(jiǎn)介</p></div>'; showTooltip(this, "t5", _html, 300); }; t6.onmouseenter = function () { var _html = '<iframe src="http://www.imooc.com/" width="480" height="300"></iframe>' showTooltip(this, "t6", _html, 500); };*/ } </script> <body> <div id="demo"> <h3>原生JavaScript實(shí)現(xiàn)ToolTip效果</h3> <p>ToolTip效果是非常常見(jiàn)的網(wǎng)頁(yè)特效,它可以在用戶將指針?lè)胖迷诳丶蠒r(shí)為用戶顯示提示信息。 比如簡(jiǎn)稱文字顯示一行文字全稱,例:<a class="tooltip" id="tooltip1">中國(guó)</a>, <a class="tooltip" id="tooltip2">NBA</a>。 又比如顯示一段文字,例:唐詩(shī)三百首中的<a class="tooltip" id="tooltip3">春曉</a>你會(huì)么?如果不看tooltip提示你背不出來(lái)的話,那么你 可要加油了。 </p> <p> ToolTip效果還可以用來(lái)顯示圖片,例:<a class="tooltip" id="tooltip4">西湖美景</a>。當(dāng)然顯示一塊兒帶格式的內(nèi)容也不在話下,例: <a class="tooltip" id="tooltip5">我的資料</a>。 </p> <p> 甚至你可以顯示一整個(gè)網(wǎng)站:例:<a class="tooltip" id="tooltip6">慕課網(wǎng)</a>。 </p> <p> 注意好的ToolTip需要考慮樣式、效果、頁(yè)面的邊界等信息,希望你可以做出更漂亮的ToolTip效果。 </p> </div> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。