Tooltip浮動提示框效果（掌握裏面的小知識）
使用原生JavaScript設計和實現Tooltip浮動提示框特效，瞭解代碼簡化、事件綁定、事件冒泡等技巧和知識。javascript
特效四個關鍵點：
顯示：鼠標移到ToolTip超連接上時，ToolTip提示框能夠顯示出來
隱藏：鼠標移開時，ToolTip提示框自動隱藏
定位：ToolTip提示框的位置須要根據ToolTip超連接的位置來設置
可配置：ToolTip提示框能夠根據參數不一樣，改變尺寸和顯示內容css
注意點：1）border-radius和 box-shadow兼容寫法html
2）不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。對應mouseoutjava
只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。對應mouseleaveweb
3）W3C規定不容許內聯元素嵌套塊級元素 ，其中的a連接嵌套了div，可能不符合W3C標準( tip：他是移入a連接的時候在a連接中建立的div )瀏覽器
簡單的函數封裝寫法（便於引用，縮短代碼量）：
1)經過元素的id得到元素的DOM引用app
1 var $ = function(id){
2 return document.getElementById(id);
3 }
2)綁定事件的函數函數
1 function addEvent(obj,event,fn){ //要綁定的元素對象，要綁定的事件，觸發的回調函數
2 if(obj.addEventListener){ //非IE，支持冒泡和捕獲
3 obj.addEventListenner(event,fn,false);
4 }else if(obj.attachEvent){ //IE，只支持冒泡
5 obj.attachEvent('on'+event,fn);
6 }
7 }
效果如圖：網站
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <style type="text/css">
8 body{
9 font-size: 14px;
10 line-height: 1.8;
11 background: url("img/bg.jpg") no-repeat center top;
12 font-family: "微軟雅黑";
13 }
14 #demo{
15 width: 500px;
16 margin: 30px auto;
17 padding: 20px 30px;
18 position: relative;
19 background-color: #fff;
20 border-radius: 10px;
21 -moz-border-radius: 10px;/*這個屬性 主要是專門支持Mozilla Firefox 火狐瀏覽器的CSS屬性*/
22 -webkit-border-radius: 10px;/*蘋果；谷歌，等一些瀏覽器認，由於他們都用的是webkit內核*/
23 box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
24 -moz-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
25 -webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
26 }
27 #demo h2{
28 color: #03f;
29 }
30 #demo .tooltip{
31 color: #03f;
32 cursor: help;
33 }
34 .tooltip-box{
35 display: block;
36 background: #fff;
37 line-height: 1.6;
38 border: 1px solid #66CCFF;
39 color: #333;
40 padding: 20px;
41 font-size: 12px;
42 border-radius: 5px;
43 -moz-border-radius: 5px;
44 -webkit-border-radius: 5px;
45 overflow: auto;
46 }
47 #mycard img{
48 float: left;
49 width: 100px;
50 height: 100px;
51 padding: 10px;
52 }
53 #mycard p{
54 float: left;
55 width: 150px;
56 padding: 0 10px;
57 }
58 </style>
59 <script type="text/javascript">
60 window.onload=function(){
61 //綁定事件的函數
62 function addEvent(obj,event,fn){ //要綁定的元素對象，要綁定的事件，觸發的回調函數
63 if(obj.addEventListener){ //非IE，支持冒泡和捕獲
64 obj.addEventListener(event,fn,false);
65 }else if(obj.attachEvent){ //IE，只支持冒泡
66 obj.attachEvent('on'+event,fn);
67 }
68 }
69 //經過用戶代理的方式判斷是不是IE的方法，不能判斷出IE11
70 var isIE = navigator.userAgent.indexOf("MSIE") > -1;
71
72 var $ = function(id){
73 return document.getElementById(id);
74 }
75 var demo = $("demo");
76 //obj - ToolTip超連接元素
77 //id - ToolTip提示框id
78 //html - ToolTip提示框HTML內容
79 //width - ToolTip提示框寬度（可選）
80 //height - ToolTip提示框高度（可選）
81 function showTooltip(obj,id,html,width,height){
82 if($(id)==null){
83 //建立 <div class="tooltip-box" id="xx">xxxxxxxx</div>
84 var toolTipBox;
85 toolTipBox = document.createElement('div');
86 toolTipBox.className = "tooltip-box";
87 toolTipBox.id = id;
88 toolTipBox.innerHTML = html;
89 obj.appendChild(toolTipBox);
90 toolTipBox.style.width = width ? width + 'px':"auto";
91 toolTipBox.style.height = height ? height + 'px':"auto";
92 if(!width && isIE){
93 toolTipBox.style.width = toolTipBox.offsetWidth;//由於IE不支持auto屬性
94 }
95 toolTipBox.style.position = 'absolute';
96 toolTipBox.style.display = 'block';
97 var left = obj.offsetLeft;
98 var top = obj.offsetTop + 20;
99 //當瀏覽器窗口縮小時不讓提示框超出瀏覽器
100 if(left + toolTipBox.offsetWidth > document.body.clientWidth){
101 var demoLeft = demo.offsetLeft;
102 left = document.body.clientWidth - toolTipBox.offsetWidth - demoLeft;
103 if(left < 0)
104 left = 0;
105 }
106 toolTipBox.style.left = left + 'px';
107 toolTipBox.style.top = top + 'px';
108 addEvent(obj,"mouseleave" ,function(){
109 setTimeout(function(){
110 $(id).style.display = 'none';
111 },300);
112 });
113 }
114 else{
115 //顯示
116 $(id).style.display = 'block';
117 }
118 }
119 //事件冒泡
120 addEvent(demo,'mouseover',function(e){
121 var event = e || window.event;
122 var target = event.target || event.srcElement;//IE下,event對象有srcElement屬性,可是沒有target屬性;
123 //Firefox下,event對象有target屬性,可是沒有srcElement屬性.但他們的做用是至關的
124 //event.srcElement：表示的當前的這個事件源。
125 if(target.className == "tooltip"){
126 var _html;
127 var _id;
128 var _width = 200;
129 switch (target.id){
130 case "tooltip1":
131 _id = "t1";
132 _html = "中華人民共和國";
133 break;
134 case "tooltip2":
135 _id = "t2";
136 _html = "美國籃球職業聯賽";
137 break;
138 case "tooltip3":
139 _id = "t3";
140 _html = "<h2>春曉</h2><p>春眠不覺曉，</p><p>到處聞啼鳥。</p><p>夜來風雨聲，</p><p>花落知多少。</p>";
141 _width = 100;
142 break;
143 case "tooltip4":
144 _id = "t4";
145 _html = "<img src='img/1.jpg' width='500' /> ";
146 _width = 520;
147 break;
148 case "tooltip5":
149 _id = "t5";
150 _html = "<div id='mycard'><img src='img/2.jpg' alt=''/><p><strong>暱稱必定要長</strong></p><p>個人簡介個人簡介</p></div>";
151 _width = 300;
152 break;
153 case "tooltip6":
154 _id = "t6";
155 _html = "<iframe src='http://www.imooc.com/' width='480' height='300'></iframe>";
156 _width = 500;
157 break;
158 }
159 showTooltip(target,_id,_html,_width);
160 }
161 });
162 /* var t1 = $("tooltip1");
163 var t2 = $("tooltip2");
164 var t3 = $("tooltip3");
165 var t4 = $("tooltip4");
166 var t5 = $("tooltip5");
167 var t6 = $("tooltip6");
168 t1.onmouseenter = function () {
169 showTooltip(this, "t1", '中華人民共和國', 200);
170 };
171 t2.onmouseenter = function () {
172 showTooltip(this, "t2", '美國籃球職業聯賽', 200);
173 };
174 t3.onmouseenter = function () {
175 showTooltip(this, "t3", '<h2>春曉</h2><p>春眠不覺曉，</p><p>到處聞啼鳥。</p><p>夜來風雨聲，</p><p>花落知多少。</p>', 100);
176 };
177 t4.onmouseenter = function () {
178 showTooltip(this, "t4", '<img src="img/1.jpg" width="500" /> ', 520);
179 };
180 t5.onmouseenter = function () {
181 var _html = '<div id="mycard"><img src="img/2.jpg" alt=""/><p><strong>暱稱必定要長</strong></p><p>個人簡介個人簡介</p></div>';
182 showTooltip(this, "t5", _html, 300);
183 };
184 t6.onmouseenter = function () {
185 var _html = '<iframe src="http://www.imooc.com/" width="480" height="300"></iframe>'
186 showTooltip(this, "t6", _html, 500);
187 };*/
188 }
189 </script>
190 <body>
191 <div id="demo">
192 <h2>原生JavaScript實現ToolTip效果</h2>
193 <p>ToolTip效果是很是常見的網頁特效，它能夠在用戶將指針放置在控件上時爲用戶顯示提示信息。
194 好比簡稱文字顯示一行文字全稱，例：<a class="tooltip" id="tooltip1">中國</a>， <a class="tooltip" id="tooltip2">NBA</a>。
195 又好比顯示一段文字，例：唐詩三百首中的<a class="tooltip" id="tooltip3">春曉</a>你會麼？若是不看tooltip提示你背不出來的話，那麼你
196 可要加油了。
197 </p>
198 <p>
199 ToolTip效果還能夠用來顯示圖片，例：<a class="tooltip" id="tooltip4">西湖美景</a>。固然顯示一起帶格式的內容也不在話下，例：
200 <a class="tooltip" id="tooltip5">個人資料</a>。
201 </p>
202 <p>
203 甚至你能夠顯示一整個網站：例：<a class="tooltip" id="tooltip6">慕課網</a>。
204 </p>
205 <p>
206 注意好的ToolTip須要考慮樣式、效果、頁面的邊界等信息，但願你能夠作出更漂亮的ToolTip效果。
207 </p>
208 </div>
209 </body>
210 </html>
相關文章
- 1. CSS3-tooltip提示框 動畫提示框
- 2. JavaScript 浮動定位提示效果
- 3. 原生js實現tooltip提示框的效果
- 4. Easyui---Tooltip( 提示框)
- 5. JQ 浮動顯示效果
- 6. CSS3實現Bootstrap的tooltip動畫提示效果
- 7. 網頁|利用提示框（Tooltip）實現彈窗效果
- 8. 提示框第三方庫之MBProgressHUD iOS toast效果 動態提示框效果
- 9. echarts —— tooltip 鼠標懸浮顯示提示框屬性
- 10. js實現tooltip動態提示效果（文字版）
- 更多相關文章...
- • ionic 浮動框 - ionic 教程
- • Eclipse 懸浮提示 - Eclipse 教程
- • SpringBoot中properties文件不能自動提示解決方法
- • IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
歡迎關注本站公眾號,獲取更多信息
