<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>follow mouse with a div</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">
var $mouseX = 0, $mouseY = 0;
var $xp = 0, $yp =0;
$(document).mousemove(function(e){
$mouseX = e.pageX;
$mouseY = e.pageY;
});
$(document).ready(
setInterval(function(){
$xp += ($mouseX-$xp)/20;
$yp += ($mouseY-$yp)/20;
$("#floatdiv").css({left:$xp, top:$yp});
}, 20)
)
</script>
<style type="text/css">
.fdiv{position: absolute;width: 180px;height: 90px;background-color: gray;z-index: 300px;
font-size: small;}
</style>
</head>
<body>
<div id="floatdiv" class="fdiv">样式设置成absolute。不用setInterval，直接move事件时改变div的left和top值一样</div>
</body>
</html>
分享到：
相关推荐
这次我们要给大家介绍一个超酷的jQuery动画特效，当你移动或者点击鼠标时，鼠标周围即会出现许多大小不一的气泡，并且这些气泡跟随鼠标一起滑动，气泡模拟非常真实，一段时间内气泡就会逐渐破灭。另外，你也可以通过...
"jquery图片跟随鼠标晃动效果"是一个基于jQuery库实现的特效，旨在为用户提供一种新颖的交互方式，使图片在鼠标移动时产生动感十足的视觉体验。这个特效由韩雪冬工作室开发，因其精美的设计和出色的动态性能，受到了...
### jQuery实现div跟随鼠标移动的知识点 #### 1. jQuery基础 在深入讨论如何使用jQuery实现div跟随鼠标移动之前，需要了解jQuery的基本概念。jQuery是一个快速、小巧、功能丰富的JavaScript库，通过使用jQuery，...
《jQuery实现鼠标拖动div排序技术详解》 在网页开发中，用户交互体验是至关重要的。其中，元素的可拖动排序功能可以让用户更加直观地调整界面布局，提高使用便捷性。本文将深入探讨如何利用jQuery库实现鼠标上下...
本示例"jquery元素跟随鼠标移动"是JS特效的一种，它涉及到的核心技术主要是jQuery的选择器、事件处理和CSS定位。接下来，我们将深入探讨这些知识点。 首先，jQuery选择器是jQuery库中的基石，它使得我们能够方便地...
本教程将聚焦于一个特定的jQuery特效——"背景图片跟随鼠标摆动"，这是一个能够提升用户交互体验的创新设计。这个特效使得网页背景图片根据用户的鼠标移动而动态变化，增加了视觉吸引力和趣味性。 首先，我们需要...
通过jQuery，我们可以为`div`添加动态行为，如鼠标拖动。拖动功能对于创建交互式用户界面（UI）至关重要，例如可拖动的窗口或面板。 要实现鼠标拖动功能，我们需要遵循以下步骤： 1. **选择元素**：使用jQuery的...
jquery跟随鼠标在图片之间不断切换的透明遮罩效果.rarjquery跟随鼠标在图片之间不断切换的透明遮罩效果.rarjquery跟随鼠标在图片之间不断切换的透明遮罩效果.rarjquery跟随鼠标在图片之间不断切换的透明遮罩效果....
jQuery css3鼠标悬停div容器显示光标动画特效 jQuery css3鼠标悬停div容器显示光标动画特效 jQuery css3鼠标悬停div容器显示光标动画特效
"jquery 弹出层跟随鼠标移动"这一主题涉及到jQuery的事件监听、动态创建元素以及CSS定位技术。下面将详细讲解这些知识点。 1. **jQuery 事件监听**： jQuery 提供了方便的事件绑定方法，如 `.on()`，用于监听用户...
jQuery 实现鼠标移动出现提示信息 jQuery 是一个流行的 JavaScript 库，广泛应用于 Web 开发中。今天，我们将讨论如何使用 jQuery 实现鼠标移动出现提示信息的功能。 标题解析 标题“jQuery 实现鼠标移动出现提示...
【jQuery背景图片跟随鼠标摆动动画特效】 在网页设计中，动态效果往往能提升用户体验，增加网站的吸引力。"jQuery背景图片跟随鼠标摆动动画特效"是一种创新的视觉设计手法，它利用JavaScript库jQuery实现背景图片随...
jQuery Tooltip跟随鼠标提示条是一种常见的前端交互设计，用于在用户将鼠标悬停在特定元素上时，提供附加信息或指导。这种功能广泛应用于网站、应用和各种用户界面中，为用户提供方便的上下文帮助。 首先，jQuery是...
本教程将详细讲解如何利用jQuery实现一个滑动DIV的效果，适用于图片轮播或移动端应用的界面交互。 首先，我们需要在HTML文件中创建一个包含待滑动内容的容器。这个容器可以是DIV元素，里面包含多张图片或其它内容。...
漂亮的jquery UI 跟随鼠标晃动的图标动画.rar漂亮的jquery UI 跟随鼠标晃动的图标动画.rar漂亮的jquery UI 跟随鼠标晃动的图标动画.rar漂亮的jquery UI 跟随鼠标晃动的图标动画.rar漂亮的jquery UI 跟随鼠标晃动的...
本教程将详细讲解如何利用jQuery实现一个左侧浮动且跟随鼠标上下滚动的菜单代码。 首先，我们需要理解jQuery的核心概念。jQuery简化了JavaScript的DOM操作、事件处理、动画效果和Ajax交互。它的语法简洁明了，使得...
《jQuery实现鼠标上下拖动div排序的技术解析》 在网页开发中，用户交互性是提升用户体验的关键因素之一。本文将详细解析"jQuery鼠标上下拖动div排序代码.zip"中的技术要点，帮助开发者理解和应用这一实用功能。 ...
【jQuery眼睛跟随鼠标旋转特效】是一款使用jQuery库实现的交互式网页元素，它为用户提供了一种独特的视觉体验。这个特效的核心在于，一个形象的眼睛图形会根据用户鼠标的移动轨迹进行实时旋转，仿佛具有磁性般紧随其...
在深入介绍jQuery实现跟随鼠标运动图层效果的方法之前，我们首先需要了解几个关键的概念和知识点。首先，jQuery是一个快速、小巧、功能丰富的JavaScript库，它封装了JavaScript的复杂操作，使得Web开发者可以更加...
【jQuery磁性透明图层跟随鼠标移动图片特效】是一种网页交互设计技术，它利用JavaScript库jQuery来实现一种动态效果：当用户在网页上移动鼠标时，一个透明的图层会像具有磁性一样紧随鼠标指针，为用户提供了一种独特...