方案一:大家都共用一个span来显示提示内容。
type="text/javascript">
/**
* 获取鼠标在页面上的位置
* @param ev 触发的事件
* @return x:鼠标在页面上的横向位置, y:鼠标在页面上的纵向位置
*/
function getMousePoint(ev) {
// 定义鼠标在视窗中的位置
var point = {
x: 0,
y: 0
};
// 如果浏览器支持 pageYOffset, 通过 pageXOffset 和 pageYOffset 获取页面和视窗之间的距离
if (typeof window.pageYOffset != 'undefined') {
point.x = window.pageXOffset;
point.y = window.pageYOffset;
}
// 如果浏览器支持 compatMode, 并且指定了 DOCTYPE, 通过 documentElement 获取滚动距离作为页面和视窗间的距离
// IE 中, 当页面指定 DOCTYPE, compatMode 的值是 CSS1Compat, 否则 compatMode 的值是 BackCompat
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
point.x = document.documentElement.scrollLeft;
point.y = document.documentElement.scrollTop;
}
// 如果浏览器支持 document.body, 可以通过 document.body 来获取滚动高度
else if (typeof document.body != 'undefined') {
point.x = document.body.scrollLeft;
point.y = document.body.scrollTop;
}
// 加上鼠标在视窗中的位置
point.x += ev.clientX;
point.y += ev.clientY;
// 返回鼠标在视窗中的位置
// 获取span,设置span的位置,跟随鼠标
var spanid = document.getElementById("spanid");
spanid.style.pixelTop = point.y + 15;
spanid.style.pixelLeft = point.x + 10;
}
//设置span的内容并延迟显示
function dis(obj) {
var spanid = document.getElementById("spanid");
spani.innerHTML = obj.innerHTML;
setTimeout("xian()", 1000);
}
//隐藏span
function non() {
var spanid = document.getElementById("spanid");
spanid.style.display = "none";
}
//延迟显示
function xian() {
var spanid = document.getElementById("spanid");
spanid.style.display = "block";
}
需要显示类似TooTip属性的div
公用的一个伪装成TooTip的span
方案二:每个标签自己独享一个span来显示提示内容
type="text/javascript">
/**
* 获取鼠标在页面上的位置
* @param ev 触发的事件
* @return x:鼠标在页面上的横向位置, y:鼠标在页面上的纵向位置
*/
function getMousePoint(ev, spanid) {
// 定义鼠标在视窗中的位置
var point = {
x: 0,
y: 0
};
// 如果浏览器支持 pageYOffset, 通过 pageXOffset 和 pageYOffset 获取页面和视窗之间的距离
if (typeof window.pageYOffset != 'undefined') {
point.x = window.pageXOffset;
point.y = window.pageYOffset;
}
// 如果浏览器支持 compatMode, 并且指定了 DOCTYPE, 通过 documentElement 获取滚动距离作为页面和视窗间的距离
// IE 中, 当页面指定 DOCTYPE, compatMode 的值是 CSS1Compat, 否则 compatMode 的值是 BackCompat
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
point.x = document.documentElement.scrollLeft;
point.y = document.documentElement.scrollTop;
}
// 如果浏览器支持 document.body, 可以通过 document.body 来获取滚动高度
else if (typeof document.body != 'undefined') {
point.x = document.body.scrollLeft;
point.y = document.body.scrollTop;
}
// 加上鼠标在视窗中的位置
point.x += ev.clientX;
point.y += ev.clientY;
// 返回鼠标在视窗中的位置,设置span的位置跟随鼠标
var spanid= document.getElementById(spanid);
spanid.style.pixelTop = point.y;
spanid.style.pixelLeft = point.x + 10;
}
//显示span
function dis(spanid) {
var spanid= document.getElementById(spanid);
spanid.style.display = "block";
setTimeout("xian("+spanid+")", 1000);
}
//隐藏span
function non(spanid) {
var spanid= document.getElementById(spanid);
spanid.style.display = "none";
}
//延迟显示
function xian(spanid) {
var spanid= document.getElementById(spanid);
spanid.style.display = "block";
}
需要显示类似TooTip属性的div
每个标签都要自带的一个伪装成TooTip的span
方案二的缺点延迟效果不好,但是方案二与方案一最终效果要看整体页面的布局显示。
type="text/javascript">
/**
* 获取鼠标在页面上的位置
* @param ev 触发的事件
* @return x:鼠标在页面上的横向位置, y:鼠标在页面上的纵向位置
*/
function getMousePoint(ev) {
// 定义鼠标在视窗中的位置
var point = {
x: 0,
y: 0
};
// 如果浏览器支持 pageYOffset, 通过 pageXOffset 和 pageYOffset 获取页面和视窗之间的距离
if (typeof window.pageYOffset != 'undefined') {
point.x = window.pageXOffset;
point.y = window.pageYOffset;
}
// 如果浏览器支持 compatMode, 并且指定了 DOCTYPE, 通过 documentElement 获取滚动距离作为页面和视窗间的距离
// IE 中, 当页面指定 DOCTYPE, compatMode 的值是 CSS1Compat, 否则 compatMode 的值是 BackCompat
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
point.x = document.documentElement.scrollLeft;
point.y = document.documentElement.scrollTop;
}
// 如果浏览器支持 document.body, 可以通过 document.body 来获取滚动高度
else if (typeof document.body != 'undefined') {
point.x = document.body.scrollLeft;
point.y = document.body.scrollTop;
}
// 加上鼠标在视窗中的位置
point.x += ev.clientX;
point.y += ev.clientY;
// 返回鼠标在视窗中的位置
// 获取span,设置span的位置,跟随鼠标
var spanid = document.getElementById("spanid");
spanid.style.pixelTop = point.y + 15;
spanid.style.pixelLeft = point.x + 10;
}
//设置span的内容并延迟显示
function dis(obj) {
var spanid = document.getElementById("spanid");
spani.innerHTML = obj.innerHTML;
setTimeout("xian()", 1000);
}
//隐藏span
function non() {
var spanid = document.getElementById("spanid");
spanid.style.display = "none";
}
//延迟显示
function xian() {
var spanid = document.getElementById("spanid");
spanid.style.display = "block";
}
需要显示类似TooTip属性的div
公用的一个伪装成TooTip的span
方案二:每个标签自己独享一个span来显示提示内容
type="text/javascript">
/**
* 获取鼠标在页面上的位置
* @param ev 触发的事件
* @return x:鼠标在页面上的横向位置, y:鼠标在页面上的纵向位置
*/
function getMousePoint(ev, spanid) {
// 定义鼠标在视窗中的位置
var point = {
x: 0,
y: 0
};
// 如果浏览器支持 pageYOffset, 通过 pageXOffset 和 pageYOffset 获取页面和视窗之间的距离
if (typeof window.pageYOffset != 'undefined') {
point.x = window.pageXOffset;
point.y = window.pageYOffset;
}
// 如果浏览器支持 compatMode, 并且指定了 DOCTYPE, 通过 documentElement 获取滚动距离作为页面和视窗间的距离
// IE 中, 当页面指定 DOCTYPE, compatMode 的值是 CSS1Compat, 否则 compatMode 的值是 BackCompat
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
point.x = document.documentElement.scrollLeft;
point.y = document.documentElement.scrollTop;
}
// 如果浏览器支持 document.body, 可以通过 document.body 来获取滚动高度
else if (typeof document.body != 'undefined') {
point.x = document.body.scrollLeft;
point.y = document.body.scrollTop;
}
// 加上鼠标在视窗中的位置
point.x += ev.clientX;
point.y += ev.clientY;
// 返回鼠标在视窗中的位置,设置span的位置跟随鼠标
var spanid= document.getElementById(spanid);
spanid.style.pixelTop = point.y;
spanid.style.pixelLeft = point.x + 10;
}
//显示span
function dis(spanid) {
var spanid= document.getElementById(spanid);
spanid.style.display = "block";
setTimeout("xian("+spanid+")", 1000);
}
//隐藏span
function non(spanid) {
var spanid= document.getElementById(spanid);
spanid.style.display = "none";
}
//延迟显示
function xian(spanid) {
var spanid= document.getElementById(spanid);
spanid.style.display = "block";
}
需要显示类似TooTip属性的div
每个标签都要自带的一个伪装成TooTip的span
方案二的缺点延迟效果不好,但是方案二与方案一最终效果要看整体页面的布局显示。