js code
var floatX,floatY,boxX,boxY,pageX,pageY;
var cX = document.documentElement.clientWidth;
var cY = document.documentElement.clientHeight;
$(document).ready(function(){
$('#wrap').css({height:cY});
//从这里开始
$('.mainbox').hover(function(){
$(this).mousemove(function(event){
pageX = event.clientX + $(window).scrollLeft();
pageY = event.clientY + $(window).scrollTop();
boxX = $('#float').outerWidth(true);
boxY = $('#float').outerHeight(true);
if ((cX - event.clientX) < (boxX + 35)){
floatX = pageX - boxX - 15;
}else{
floatX = pageX + 15;
}
if ((cY - event.clientY) < (boxY + 10)){
floatY = pageY - boxY - 10;
}else{
floatY = pageY + 10;
}
$('#float').css({top: floatY, left: floatX});
$('#float').show();
});
},function(){
$('#float').hide();
})
$(window).resize(function() {
cX = document.documentElement.clientWidth;
cY = document.documentElement.clientHeight;
});
})
css code
* {
margin:0;
padding:0;
border:0;
}
.mainbox {
width:150px;
height:150px;
background:#333;
float:left;
margin-right:30px;
}
#float {
border:1px solid #333;
background:#999;
padding:10px;
position:absolute;
left:0;
top:0;
z-index:9999;
display:none;
}
html code
<div id="wrap" style="position:relative; width:960px; float:right;">
<div style="position:absolute; top:0; left:0;">
<div class="mainbox"></div>
<div class="mainbox"></div>
<div class="mainbox"></div>
<div class="mainbox"></div>
<div class="mainbox"></div>
</div>
<div style="position:absolute; bottom:0; left:0;">
<div class="mainbox"></div>
<div class="mainbox"></div>
<div class="mainbox"></div>
<div class="mainbox"></div>
<div class="mainbox"></div>
</div>
<div style="position:absolute; top:50%; left:0; margin-top:-75px;">
<div class="mainbox"></div>
<div class="mainbox"></div>
<div class="mainbox"></div>
<div class="mainbox"></div>
<div class="mainbox"></div>
</div>
</div>
<div style="clear:both"></div>
<br />
<br />
<br />
<br />
<br />
<p id="float">数据读取中...<br />数据读取中...<br /></p>
测试地址:
http://www.zhangjingwei.com/demo/flow_mouse/
转至:http://www.zhangjingwei.com/archives/jquery-event-div/
分享到:
相关推荐
### jQuery实现div跟随鼠标移动的知识点 #### 1. jQuery基础 在深入讨论如何使用jQuery实现div跟随鼠标移动之前,需要了解jQuery的基本概念。jQuery是一个快速、小巧、功能丰富的JavaScript库,通过使用jQuery,...
本示例"jquery元素跟随鼠标移动"是JS特效的一种,它涉及到的核心技术主要是jQuery的选择器、事件处理和CSS定位。接下来,我们将深入探讨这些知识点。 首先,jQuery选择器是jQuery库中的基石,它使得我们能够方便地...
【jQuery背景图片跟随鼠标摆动动画特效】 在网页设计中,动态效果往往能提升用户体验,增加网站的吸引力。"jQuery背景图片跟随鼠标摆动动画特效"是一种创新的视觉设计手法,它利用JavaScript库jQuery实现背景图片随...
### jQuery 鼠标悬停跟随动态效果 在前端开发中,通过JavaScript库如jQuery来增强用户交互体验是非常常见的做法。本篇文章将详细介绍如何利用jQuery实现一个动态菜单或列表的鼠标悬停显示功能,该功能可以模拟类似...
本教程将聚焦于一个特定的jQuery特效——"背景图片跟随鼠标摆动",这是一个能够提升用户交互体验的创新设计。这个特效使得网页背景图片根据用户的鼠标移动而动态变化,增加了视觉吸引力和趣味性。 首先,我们需要...
标题中的"jquery特效DIV层跟随页面向下滚动"指的是在网页设计中使用jQuery库实现的一种交互效果。当用户滚动页面时,一个特定的div元素(通常包含重要的信息或导航)会固定在屏幕的一侧,保持可见,即使用户滚动页面...
在深入介绍jQuery实现跟随鼠标运动图层效果的方法之前,我们首先需要了解几个关键的概念和知识点。首先,jQuery是一个快速、小巧、功能丰富的JavaScript库,它封装了JavaScript的复杂操作,使得Web开发者可以更加...
<div id="followCursor">跟随鼠标</div> ``` 这里的`id`属性用于在CSS和JavaScript中唯一标识该元素。 接下来是CSS部分。我们可以为这个元素设置样式,使其在页面上具有明显的视觉效果: ```css #followCursor { ...
本教程将详细讲解如何利用jQuery实现一个左侧浮动且跟随鼠标上下滚动的菜单代码。 首先,我们需要理解jQuery的核心概念。jQuery简化了JavaScript的DOM操作、事件处理、动画效果和Ajax交互。它的语法简洁明了,使得...
要实现"div跟着鼠标走"的效果,主要涉及到jQuery中的两个关键函数:`mousemove`和`css`。`mousemove`是jQuery的事件绑定函数,用于监听鼠标移动事件;`css`则用于修改元素的样式,包括位置属性。 1. **创建HTML结构...
**jQuery 实现多层视觉鼠标跟随效果** 在网页设计中,动态效果往往能提升用户体验,增加网站的吸引力。其中,鼠标跟随效果就是一种常见的交互设计手法。本教程将详细介绍如何利用jQuery库来创建多层视觉的鼠标跟随...
在这个"jQuery鼠标移动图片遮罩显示特效.zip"压缩包中,包含了一个利用jQuery实现的独特图片展示功能,特别适用于图片相册或者产品展示等场景。接下来,我们将深入探讨这个特效背后的技术细节。 首先,jQuery的事件...
"jquery 弹出层跟随鼠标移动"这一主题涉及到jQuery的事件监听、动态创建元素以及CSS定位技术。下面将详细讲解这些知识点。 1. **jQuery 事件监听**: jQuery 提供了方便的事件绑定方法,如 `.on()`,用于监听用户...
本篇将详细介绍如何使用jQuery和原生JavaScript实现鼠标滚轮事件的监听。 一、jQuery监听鼠标滚轮事件 jQuery库提供了一种简洁的方式来处理DOM元素上的事件,包括滚轮事件。要监听滚轮事件,可以使用`$(element)....
《jQuery实现多层视觉鼠标跟随效果详解》 在网页设计中,动态效果是提升用户体验、增加互动性的重要手段。jQuery库以其简洁的API和强大的功能,成为JavaScript开发中广泛使用的工具,尤其在创建各种视觉效果时更为...
【jQuery磁性透明图层跟随鼠标移动图片特效】是一种网页交互设计技术,它利用JavaScript库jQuery来实现一种动态效果:当用户在网页上移动鼠标时,一个透明的图层会像具有磁性一样紧随鼠标指针,为用户提供了一种独特...
"jQuery鼠标上下层拖动排序代码.zip"就是一个实例,它提供了一个利用jQuery实现的div容器中li元素的拖动排序功能,适用于创建可自定义排序的列表或布局。这个功能尤其对那些需要用户自由调整内容顺序的Web应用非常...
"简单jquery鼠标跟随左侧浮动菜单特效代码"是实现此类功能的一种技术方案,主要依赖于JavaScript库jQuery的强大功能。接下来,我们将深入探讨这一特效的实现原理和步骤。 1. **jQuery简介** jQuery是一个轻量级、...
在本篇文章中,我们将学习如何使用jQuery库来实现一个鼠标跟随效果,即鼠标移动至图片上方时,会出现一个与原图片相关的放大图片,并且随着鼠标在图片上的移动而移动。这种效果在很多网页设计中非常常见,能够为用户...