当前位置：首页 > news >正文

Tooltip浮动提示框效果（掌握里面的小知识）

news 来源：原创 2024/5/9 4:29:49

使用原生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引用

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.οnlοad=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>

转载于:https://www.cnblogs.com/libin-1/p/6683123.html