首页 > 代码库 > JS实现鼠标移入标签页的完整title提示

JS实现鼠标移入标签页的完整title提示

2024-09-19 18:50:19   220人阅读

一、条件

　　1、在鼠标移入标签上时可以捕获到 title 对象身上触发的事件；

　　2、网页标签不在页面的范围内了，但是他还是在当前屏幕内；

　　3、标签与页面相对于屏幕的位置都可以得到。

有了以上三个条件我们就能够自己实现JS实现鼠标移入标签页的完整 title 提示的功能了。

二、实现功能

　　直接上代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>title-tip,这里是个很长很长很长很长很长很长很长很长很长很长很长很长很长很长的title</title>
 8 </head>
 9 
10 <body>
11
12     <script>
13         let til = document.title;
14         til.onmouseover = function(e){
15             let chat = document.createDocumentFragment();
16             chat.innerHTML = ‘<p class="titleTip">chat测试</p>‘
17             document.bdy.appendChild(chat);
18             let tip = document.querySelector(‘.titleTip‘);
19             tip.style.position = "fixed";
20             tip.style.left = e.clientX;
21             tip.style.top = e.clientY-document.body.clientTop;
22         }
23     </script>
24 </body>
25 
26 </html>

这个样子就已经能够实现功能了，这里还是用到了document.createDocumentFragment()，但是就这么一个小功能难道还要我大名鼎鼎的createDocumentFragment每次来服侍你？

小马：老子你不需要你来好不好！

　　技术分享

上面中使用了createDocumentFragment，这里其实没有这个必要，这里直接差创建一个 p 标签就好了，修改后如下

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>title-tip,这里是个很长很长很长很长很长很长很长很长很长很长很长很长很长很长的title</title>
 8 </head>
 9 
10 <body>
11 
12     <script>
13         let til = document.title;
14         til.onmouseover = function(e){
15             let chat = document.createElement(‘p‘);
16             chat.className = ‘titleTip‘;
17             chat.innerHTML = til.innerHTML;
18             document.bdy.appendChild(chat);
19             let tip = document.querySelector(‘.titleTip‘);
20             tip.style.position = "fixed";
21             tip.style.left = e.clientX;
22             tip.style.top = e.clientY-document.body.clientTop;
23         }
24     </script>
25 </body>
26 
27 </html>

这样子就好多了，如果你觉得每次创建不好也可以将创建 p 标签的代码直接放在 onm ouseover 事件前面，这样子就可以只创建一次了，然后给p标签设置 display 属性，鼠标的 mouseover 事件就控制这个 display 属性就可以了。

并且这里的功能十分简单并且也没人无聊到不停地玩这个吧，如果真的不放心别人会玩他的页面标签，你就给给 mouseover 事件中控制 display 属性的语句放在 setTimeout 中，并且加上节流就好了（如果不知道节流怎么加，请在下方回复）。

JS实现鼠标移入标签页的完整title提示


联系
我们