`
hedahai119
  • 浏览: 104685 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

jquery鼠标跟随div

    博客分类:
  • js
阅读更多
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/
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics