场景:网页内容很多,但是要给需要注解的词汇进行鼠标悬浮操作,但是注解内容的实际大小确定。
例如:我就是爱前端
<div class="main-container">
<div class="abs-domain">
蜗牛一步步向<span class="need_explain">前端</span>
<div class="explain-content">
这里就随便写写吧,自己的事情完成了吗;
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var need_explain=$('.need-explain');
$('.need-explain').hover(function(){
})
})
</script>
蜗牛一步步向<span class="need_explain">前端</span>
<div class="explain-content">
这里就随便写写吧,自己的事情完成了吗;
</div>
</div>
</div>
<script type="text/javascript">
var bluemouthleft,bluemouthtop,window_heigt,window_wid;
var scrolllTop=0;
$(window).scroll(function(){
scrolllTop=$(window).scrollTop();
})
$('.customername i').hover(function(){
var customernameshow=$(this).parents('.customername').find('.customernameshow');
var customernameshow_heit=customernameshow.outerHeight();
window_heit=$(window).height();
window_wid=$(window).width();
bluemouthleft = $(this).position().left + 25;//相对父级元素的位置 左边距
bluemouthtop = $(this).position().top;////相对父级元素的位置 上边距1
bluemouthtop1 = $(this).offset().top;
bluemouthleft1 = $(this).offset().left;
var x1=window_wid-bluemouthleft1;
var y1=bluemouthtop1-scrolllTop;//滚动条的滚动位置
if(x1<220){
customernameshow.show().css({ 'left':(bluemouthleft-230)+'px'});
}else{
customernameshow.show().css({ 'left': bluemouthleft + 'px' });
}
if ($('body>div').height()<window_heit) {
$('body>div').height('100%');
}//当实际内容高度小于屏幕高度,要将其设置成height100%;,这样浮层才可以看见
if(window_heit-y1<customernameshow_heit){
var y2=customernameshow_heit-window_heit+y1;
customernameshow.css({ 'top':'-'+y2+'px' });
}
}, function() {
var customernameshow=$(this).parents('.customername').find('.customernameshow');
customernameshow.hide();
})
</script>