代码
- <body>
- <img width=100 src="timelogo.gif" title="图片信息" ><p>
- <a href="###" title="文字信息，深灰背景色，黄色文字">文字链接</a><p>
- <input type="text" name="n" id="n" size="20px" title="文本框"/>
- <div style="visibility:hidden;border:0px solid #000000;background-color:#555555;font-size:12px;color:yellow;position:absolute;" id=titlelayer></div>
- <script>
- document.body.onmousemove=quicktitle;
- document.body.onmouseover=gettitle;
- document.body.onmouseout=restoretitle;
-
- var temptitle='';
-
- function gettitle() {
- if(event.srcElement.title && (event.srcElement.title!='' || (event.srcElement.title=='' && temptitle!=''))) {
- titlelayer.style.left=event.x;
- titlelayer.style.top=event.y+20;
- titlelayer.style.visibility='visible';
- temptitle=event.srcElement.title;
- event.srcElement.title='';
- titlelayer.innerText=temptitle;
- }
- }
-
- function quicktitle() {
- if(titlelayer.style.visibility=='visible') {
- titlelayer.style.left=event.x+document.body.scrollLeft;
- titlelayer.style.top=event.y+20+document.body.scrollTop;
- }
- }
-
- function restoretitle() {
- event.srcElement.title=temptitle;
- temptitle='';
- titlelayer.style.visibility='hidden';
- }
- </script>
- </body>
感觉在开发中这个用得还比较多，就贴出来了，样式自己美化呵呵。
可以把里面的脚本提取出来做成自己的通用函数，就不用每次在页面上写。
分享到：
相关推荐
至此，我们就完成了使用jQuery制作顶部浮动层显示隐藏的功能。用户点击按钮时，浮动层会以平滑的动画效果展开或收起。这种设计能够提高网页的用户体验，同时保持页面布局的整洁。在实际项目中，可以根据需求自定义...
浮动框架是通过`<iframe>`标签实现的。 **一、设置浮动框架** 1. `<iframe>`标签的使用： `<iframe>`标签用于插入一个浮动框架，其基本语法如下： ```html <iframe name="myframe" src="a....
在网页设计中，提升用户体验是至关重要的，而“鼠标焦点突出显示所悬停图片及显示浮动文字”这一功能就是一种常见的交互设计手法。这个功能可以让用户在浏览网页时更加直观地了解图片信息，无需点击就能预览内容，...
<title>jQuery浮动标签插件示例</title> 请输入用户名" id="username"> 请输入邮箱" id="email"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="js/plugin.js">...
`<head>`部分包含元信息，如字符编码（`<meta charset="UTF-8">`）和页面标题（`<title>QQ登录导航</title>`）。`<body>`部分则包含实际的网页内容。 在创建QQ登录导航时，我们会用到`<nav>`元素，它是HTML5中专...
- **说明**：`<cite>` 标签用于用斜体显示标明引言。例如： ```html <p><cite>The Scream</cite> by Edvard Munch. ``` ##### 标签：clientinformation - **说明**：虽然没有直接对应的 `<clientinformation>` ...
本文将深入探讨如何使用 jQuery UI 实现一个功能：当页面滚动到底部时，显示一个浮动的弹出层，用于展示图文列表。这个功能在许多网站中常见，比如加载更多内容、展示评论或广告等。 首先，我们需要理解 jQuery UI ...
在网页设计中，有时我们需要实现一个功能：当用户将鼠标悬停在某个div元素上时，显示特定的信息或另一个div。这个功能可以增强用户体验，帮助用户更好地理解和操作页面。本教程将详细介绍如何实现这一功能，并确保...
这个技术利用了HTML元素的title属性，当用户的鼠标指针移动到该元素上时，会显示出title属性中定义的文本信息。这对于提供额外信息，改善用户体验具有重要作用。 首先需要了解的是，title属性是一种全局属性，意味...
2. **`<head>`**: 包含元信息，如字符集设置（`<meta charset="UTF-8">`）和页面标题（`<title>`）。 3. **`<body>`**: 包含网页的实际内容，如文本、图像和链接。 4. **`<h1> - <h6>`**: 定义六级标题，用于组织...
<title>浮动广告示例</title> <!-- 引入Ad.js --> <script src="Ad.js" defer></script> <!-- 网页其他内容 --> </html> ``` `Ad.js`文件中通常包含以下几个关键部分： 1. **广告元素的创建**：使用...
在现代网页设计中，图片信息的浮动显示是一个非常实用的功能，它可以在用户将鼠标悬停在图片上时提供额外的信息，如图片的名称、描述或者其他相关数据，这样可以增强用户的交互体验。要实现这个功能，jQuery是一个...
此外，还包含了一个title标签，其中标识了“jquery浮动层”，说明了网页的主旨内容。 4. CSS样式定义：文档内嵌的style标签定义了浮动层的样式，其中包含ID为“Float”的div元素的样式设置。设置了背景颜色、高度、...
`index.html`文件通常包含了HTML元素，比如`<p>`或`<span>`标签，这些元素将包含我们想要浮动的文字。例如： ```html <!DOCTYPE html> <html lang="zh"> <title>js文字浮动效果</title> 浮动的文字 ...
在本案例中，"jquery右下角浮动窗口广告代码"指的是利用jQuery实现的一种广告展示方式，它会在网页的右下角创建一个浮动窗口，通常用于吸引用户注意力并展示推广信息。 这种广告设计的关键在于利用jQuery的动态效果...
<title>右侧浮动广告</title> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> #floatingAd { position: fixed; right: 0; top: 50%; transform: translateY(-50%); width: 300px; /...
- `<body>`标签包含了页面的主体内容，包括欢迎信息、可拖动的浮动层以及网站信息。 5. 网页交互体验的优化 - 通过`***`提供的示例页面，用户可以直观体验拖动效果。 - 在实际使用中，建议对URL进行简化和优化，...
在创建这个导航菜单时，我们需要用`<nav>`标签定义导航区域，然后用`<ul>`和`<li>`组合创建一个无序列表，每个`<li>`代表菜单的一个选项。 接着，CSS（Cascading Style Sheets）用来控制网页的样式和布局。为了让...
框架链接不同于浮动框架链接的地方在于，框架链接需要在 frameset 标签中定义框架的结构，而浮动框架链接则是将一个页面嵌套在另一个页面中。 在 Dreamweaver 中，我们可以使用浮动框架链接来创建一个浮动框架，...
接下来，我们要实现鼠标悬停时显示位置信息，首先要监听鼠标移动事件，这通常通过`addEventListener`方法完成，监听`mousemove`事件。当鼠标在Canvas上移动时，事件处理函数会被调用： ```javascript var canvas = ...