<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>demo</title>
<style type="text/css">
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:1px;
color:#333;
display:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
var x=10;
var y=20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title="";
var tooltip = "<div id='tooltip'>"+this.title+"</div>";
$("body").append(tooltip);
$("#tooltip")
.css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
}).show("fast"); //设置x 坐标和y 坐标，并且显示
}).mouseout(function(){
this.title=this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e){
$("#tooltip")
.css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
});
});
});
</script>
</head>
<body>
<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>
<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
<p><a href="#" title="这是自带提示2.">自带提示2.</a></p>
</body>
</html>
分享到：
相关推荐
本示例"jquery元素跟随鼠标移动"是JS特效的一种，它涉及到的核心技术主要是jQuery的选择器、事件处理和CSS定位。接下来，我们将深入探讨这些知识点。 首先，jQuery选择器是jQuery库中的基石，它使得我们能够方便地...
"jquery图片跟随鼠标晃动效果"是一个基于jQuery库实现的特效，旨在为用户提供一种新颖的交互方式，使图片在鼠标移动时产生动感十足的视觉体验。这个特效由韩雪冬工作室开发，因其精美的设计和出色的动态性能，受到了...
"jQuery图片跟随鼠标移动效果"就是一种常见的交互式图像展示技术。这个效果主要应用于全屏或宽屏背景图片，尤其是那些分辨率较高，单屏无法完全显示的图片。通过JavaScript库jQuery，我们可以实现图片在用户鼠标移动...
"jquery元素跟随鼠标移动"是一个常见的交互效果，常用于创建动态UI或者游戏中的对象追踪。在这个主题中，我们将深入探讨如何利用jQuery实现这一功能，以及涉及的相关CSS和HTML5知识点。 首先，我们需要理解HTML5的...
本教程将探讨如何利用JavaScript库jQuery实现一种常见的UI特效——菜单跟随鼠标移动。这个功能可以使用户在浏览网页时更加方便地访问导航菜单，尤其在菜单项较多或者屏幕空间有限的情况下，提供了一种优雅的解决方案...
jQuery Tooltip跟随鼠标提示条是一种常见的前端交互设计，用于在用户将鼠标悬停在特定元素上时，提供附加信息或指导。这种功能广泛应用于网站、应用和各种用户界面中，为用户提供方便的上下文帮助。 首先，jQuery是...
jQuery磁性透明图层跟随鼠标移动图片特效.rarjQuery磁性透明图层跟随鼠标移动图片特效.rarjQuery磁性透明图层跟随鼠标移动图片特效.rarjQuery磁性透明图层跟随鼠标移动图片特效.rarjQuery磁性透明图层跟随鼠标移动...
"jquery 弹出层跟随鼠标移动"这一主题涉及到jQuery的事件监听、动态创建元素以及CSS定位技术。下面将详细讲解这些知识点。 1. **jQuery 事件监听**： jQuery 提供了方便的事件绑定方法，如 `.on()`，用于监听用户...
【jQuery磁性透明图层跟随鼠标移动图片特效】是一种网页交互设计技术，它利用JavaScript库jQuery来实现一种动态效果：当用户在网页上移动鼠标时，一个透明的图层会像具有磁性一样紧随鼠标指针，为用户提供了一种独特...
"jQuery图片跟随鼠标移动效果"是一种常见的交互式设计，它可以将图片或其他元素与用户的鼠标指针联动，创造出一种有趣的视觉体验。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画效果等任务，...
3. **JavaScript/jQuery事件处理**：JavaScript或jQuery的`mousemove`事件被用于监听用户的鼠标移动。每当鼠标在页面上移动时，都会触发该事件，然后执行相应的回调函数，计算出鼠标的位置并更新眼睛的位置。 4. **...
《jQuery磁性透明图层跟随鼠标移动图片特效详解》 在网页设计中，动态效果能够提升用户体验，使得网站更加生动有趣。"jQuery磁性透明图层跟随鼠标移动图片特效"是一个巧妙的应用，它通过JavaScript库jQuery实现了一...
在这个项目中，jQuery被用来监听鼠标的移动事件，并根据鼠标的坐标改变图片的位置，实现了图片跟随鼠标移动的功能。 CSS3是CSS（层叠样式表）的最新版本，引入了许多新的特性和功能，如选择器、边框和背景、盒模型...
以上就是使用jQuery制作跟随鼠标移动的元素的基本步骤。在实际应用中，你可能还需要考虑边界检测，避免元素移出视口。此外，可以结合CSS动画或jQuery的`.animate()`方法，使元素平滑地跟随鼠标移动，增加交互体验。 ...
本教程将聚焦于一个特定的jQuery特效——"背景图片跟随鼠标摆动"，这是一个能够提升用户交互体验的创新设计。这个特效使得网页背景图片根据用户的鼠标移动而动态变化，增加了视觉吸引力和趣味性。 首先，我们需要...
### jQuery实现div跟随鼠标移动的知识点 #### 1. jQuery基础 在深入讨论如何使用jQuery实现div跟随鼠标移动之前，需要了解jQuery的基本概念。jQuery是一个快速、小巧、功能丰富的JavaScript库，通过使用jQuery，...
综上所述，"jQuery背景图片跟随鼠标摆动动画特效"是一种利用jQuery实现的动态视觉效果，它通过监听鼠标移动并动态调整背景图片的位置，为网站增添活力和趣味性。在实际应用中，开发者可以根据需求调整动画的细节，以...