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

[JS 最简单简洁的插件] 浮动提示 (title增强型)

2013-08-10 22:31 573 查看

<!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_tip').each(function(index,domEle){
var _this = $(domEle);
// 生成html
var fontSize = $(_this).css('font-size'); fontSize = parseFloat( fontSize.substr(0,2) );
var top = $(_this).offset().top + fontSize + 'px';
var left = $(_this).offset().left + 'px';
var tipId = 'mxx_tip_id_'+Math.floor((Math.random()*1000));
var tipCss = 'position:absolute;top:'+top+';left:'+left+';max-width:400px;background:#FFFCEF;border:1px solid #FFBB76;box-shadow:0 0 1px #FFBB76;border-radius:4px;padding:4px 8px;color:#666;font-size:12px;line-height:20px;z-index:9999;';
var tipHtml = '<span id="'+tipId+'" style="'+tipCss+'">'+$(_this).attr('data-tip')+'</span>';
// 绑定事件
$(_this).mouseover(function(){
$(_this).after(tipHtml);
});
$(_this).mouseout(function(){
$('#'+tipId).remove();
});
});
});
</script>

<a href='' class='mxx_tip' data-tip='我是中国人我是中国人我是中国人我是中国人'>Danny</a>是中国人吗?

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航