您的位置：首页 > Web前端 > JavaScript

[JS 最简单简洁的插件] 浮动提示 (支持显示Html和手动关闭)

2013-08-10 19:01 651 查看 
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title></title>
<style>
body{
font-size:18px;
}

</style>
<script src='http://code.jquery.com/jquery.js'></script>
</head>
<body>

<script>
$(function(){
$('.mxx_layer').each(function(index,domEle){
var _this = $(domEle);
// 设置css
$(_this).css({
'position':'relative',
'display':'inline-block'
});
$(_this).find('.mxx_sub').css({
'position':'absolute',
'display':'none',
'background':'#fff',
'border':'3px solid #fff',
'box-shadow':'1px 1px 2px 2px #999',
'border-radius':'4px',
'padding':'4px 8px',
'color':'#666',
'font-size':'12px',
'line-height':'20px',
'z-index':'9999'
});
$(_this).find('.mxx_close').css({
'position':'absolute',
'bottom':'-9px',
'right':'-2px',
'cursor':'pointer',
'display':'none'
});
// 显示方向
var width = $(_this).find('.mxx_sub').width();
var height = $(_this).find('.mxx_sub').height();
var point_1 = 'right',point_2 = 'bottom'; // 默认在右上位置显示

if( $(_this).offset().left < width ){
point_1 = 'left';
}
if( $(_this).offset().top < height ){
point_2 = 'top';
}
$(_this).find('.mxx_sub').css( point_1, '0' );
$(_this).find('.mxx_sub').css( point_2, $(_this).css('font-size') );
// 绑定事件
var close = 1; if($(_this).attr('data-close') == 'no') close = 0;
$(_this).mouseover(function(){
$(_this).find('.mxx_sub').show();
});
if(close){
$(_this).mouseout(function(){
$(_this).find('.mxx_sub').hide();
});
}else{
$(_this).find('.mxx_close').css('display','block');
$(_this).find('.mxx_close').click(function(){
$(_this).find('.mxx_sub').hide();
});
}
});
});
</script>

我是
<div class='mxx_layer'>中国<img src='https://cdn3.iconfinder.com/data/icons/fugue/icon/question-frame.png' />
<div class='mxx_sub'>
<span class='mxx_close'><img src='https://cdn1.iconfinder.com/data/icons/customicondesign-mini-lightcolour-png/16/Close.png' /></span>
<div style='width:300px'>
少林寺投资20亿建足球学校
少林寺投资20亿建足球学校
少林寺投资20亿建足球学校
少林寺投资20亿建足球学校
少林寺投资20亿建足球学校
少林寺投资20亿建足球学校
<!--这里写上自己的内容--></div>
</div>
</div>
人

<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p style='display:inline-block;width:400px;'>hello</p>

我是
<div class='mxx_layer' data-close='no'>中国<img src='https://cdn3.iconfinder.com/data/icons/fugue/icon/question-frame.png' />
<div class='mxx_sub'>
<span class='mxx_close'><img src='https://cdn1.iconfinder.com/data/icons/customicondesign-mini-lightcolour-png/16/Close.png' /></span>
<div style='width:300px'>
少林寺投资20亿建足球学校
少林寺投资20亿建足球学校
少林寺投资20亿建足球学校
少林寺投资20亿建足球学校
少林寺投资20亿建足球学校
少林寺投资20亿建足球学校
<!--这里写上自己的内容--></div>
</div>
</div>
人

</body>
</html>




内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航