92 lines
1.8 KiB
JavaScript
92 lines
1.8 KiB
JavaScript
|
/**
|
|||
|
|
* 当前文件版本：v0.1
|
|||
|
|
* 一款简单的鼠标提示js库
|
|||
|
|
* ============================================
|
|||
|
|
* 项目地址：https://github.com/ALNY-AC/mTips
|
|||
|
|
* 作者：见两小儿便日
|
|||
|
|
* 作者地址：https://github.com/ALNY-AC
|
|||
|
|
* ============================================
|
|||
|
|
*
|
|||
|
|
* */
|
|||
|
|
|
|||
|
|
var mTips = {
|
|||
|
|
c: {
|
|||
|
|
//配置项
|
|||
|
|
x: 10, //x偏移量,相对于鼠标
|
|||
|
|
y: 10, //y偏移量,相对于鼠标
|
|||
|
|
|
|||
|
|
style: {
|
|||
|
|
'position': 'fixed',
|
|||
|
|
'padding': '8px 12px',
|
|||
|
|
'color': '#fff',
|
|||
|
|
'border-radius': '5px',
|
|||
|
|
'font-family': "微软雅黑",
|
|||
|
|
'z-index': '999',
|
|||
|
|
'display': 'inline',
|
|||
|
|
'font-size': '14px',
|
|||
|
|
'background-color': 'rgba(0, 0, 0, 0.5)',
|
|||
|
|
'color': '#fff'
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//show方法，用于显示提示
|
|||
|
|
|
|||
|
|
s: function(text, a, b) {
|
|||
|
|
var style;
|
|||
|
|
var fun;
|
|||
|
|
|
|||
|
|
if(typeof(a) == 'string') {
|
|||
|
|
style = a;
|
|||
|
|
fun = b;
|
|||
|
|
} else if(typeof(a) == 'function') {
|
|||
|
|
style = b;
|
|||
|
|
fun = a;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if(style == 'undefined' || style == null) {
|
|||
|
|
style = 'default';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var doc = $('<div></div>').addClass('mTips mTips-' + style).html(text).appendTo('body');
|
|||
|
|
if(doc.css('z-index') !== '999') {
|
|||
|
|
doc.css(this.c.style);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$(document).on('mousemove', function(e) {
|
|||
|
|
$(".mTips").offset({
|
|||
|
|
top: e.pageY + mTips.c.x,
|
|||
|
|
left: e.pageX + mTips.c.y
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if(fun != null && typeof(fun) != 'undefined') {
|
|||
|
|
fun();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//hide方法，用于隐藏和删除提示
|
|||
|
|
h: function(fun) {
|
|||
|
|
|
|||
|
|
$('.mTips').remove();
|
|||
|
|
if(fun != 'undefined' && fun != null) {
|
|||
|
|
fun();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//用于给相关属性添加提示功能
|
|||
|
|
m: function() {
|
|||
|
|
|
|||
|
|
$(document).on('mouseenter', '[data-mtpis]', function(e) {
|
|||
|
|
mTips.s($(this).attr('data-mtpis'), $(this).attr('data-mtpis-style'));
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(document).on('mouseleave', '[data-mtpis]', function(e) {
|
|||
|
|
mTips.h();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
mTips.m(); //通过此函数激活所有的
|