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跟随鼠标移动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
用jQuery实现div跟着鼠标走 鼠标移动时,层也跟着鼠标的移动而移动
jquery特效DIV层跟随页面向下滚动
一个DIV层,可以跟随鼠标移动,当鼠标悬停在图片上的时候,DIV透明层也悬停在上面,效果很不错的jquery特效
一个DIV层,可以跟随鼠标移动,当鼠标悬停在图片上的时候,DIV透明层也悬停在上面,效果很不错的jquery特效-jQuery磁性透明图层跟随鼠标移动图片特效
主要介绍了jQuery实现鼠标跟随提示层效果代码,具备显示文本,Div,Table,Html等功能.涉及jQuery针对鼠标事件及页面元素的相关操作技巧,需要的朋友可以参考下
59.jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60.jQuery鼠标移上小图显示大缩略图功能 61.js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62.Supersized jQuery全屏...
当你的图片跟你当前div不一致时,或者图片比例差别较大的时候,就可以采用这种方式了 图片可以在你的内部自由转换位置。 不适合移动网页 使用方法: 1、将CSS代码引入到你的网页中 2、将body中的代码部分拷贝到...
创建一个div,div的内容为鼠标位置的文本 将创建好的div加到文档中 为提示层设置位置 2 鼠标移出标题 移除div 3 当鼠标在标题内移动时 同样添加div效果 3.JQuery实现代码 代码如下: <!DOCTYPE ...
今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果。当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑出。这是一个...
下面小编就为大家带来一篇JQuery实现DIV其他动画效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
气泡跟随鼠标移动,并在每次点击时产生不同的变化,效果非常迷人,下面小编给大家带来了,基于js实现的气泡效果实例代码,需要的朋友参考下吧
当你的图片跟你当前div不一致时,或者图片比例差别较大的时候,就可以采用这种方式了 图片可以在你的内部自由转换位置。 不适合移动网页 使用方法: 1、将CSS代码引入到你的网页中 2、将body中的代码...
1.25 实现文字跟随鼠标移动变化的动画效果 1.26 文本域中光标的定位 1.27 实现可折叠效果 1.28 文本框内容自动缩进 1.29 禁止页面滚动的方法 1.30 页面加载后消息框居中显示 1.31 创建页面固定浮动栏的方法 第2章 ...
效果描述: 当你的图片跟你当前div不一致时,或者图片比例差别较大的时候,就可以采用这种方式了 图片可以在你的内部自由转换位置。 不适合移动网页 使用方法: 1、将CSS代码引入到你的网页中 2、将body中的代码部分...
一个DIV层,可以跟随鼠标移动,当鼠标悬停在图片上的时候,DIV透明层也悬停在上面,效果很不错的jquery特效
废话不多说,直接上代码 <!...<... <head>... body,div{ margin:0; padding:0; } img{ display:block; border:none; } .box{ position:relative; width:450px; margin:20px auto;
第1部分 JavaScript.cCSS与DOM基础篇 第1章 ccJavaScript概述 1.1 JavaScript的起源 ... 4.6.2 鼠标文字跟随 …… 第 2部分 JavaScript.cCSS.cDOM高级篇 第3部分 jQuery框架篇 第4部分 综合案例篇