如何让html标签title属性现实内容时间变长

阅读更多

首先写几个方法

1、获取标签绝对位置方法

//获取当前的x坐标值
function pageX(elem){
	return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;
}
//获取当前的Y坐标值
function pageY(elem){
	return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;
}

 2、处理需要现实的文字内容

function split_str(string,words_per_line) {	
	var output_string = string.substring(0,1);	//取出i=0时的字，避免for循环里换行时多次判断i是否为0	
	for(var i=1;i 
  
 3、鼠标移入移出触发事件
 
  
var title_value = ''; 
function title_show(pSpan) {	
	var span=document.getElementById(pSpan)
	var div=document.getElementById("title_show");		
	title_value = span.title;	
	div.style.left = pageX(span)+200+'px';
	div.style.top = pageY(span)+'px';
	var words_per_line = 40;	 //每行字数	
	var title =  split_str(span.title,words_per_line);	//按每行25个字显示标题内容。	
	div.innerHTML = title;	
	div.style.display = '';	
	span.title = '';		//去掉原有title显示。
}
function title_back(pSpan) {
	var span=document.getElementById(pSpan)	
	var div=document.getElementById("title_show");		
	span.title = title_value;	
	div.style.display = "none";
}
 
  
 
 
  

	

	

		
		鼠标在这悬停显示标题
		
	
	
测试1
	
测试2
	
测试3
	
测试4
	
	

	

	
	鼠标在这悬停显示标题
	
	
	
测试1
	
测试2
	
测试3
	
测试4
	
	

	

	
		鼠标在这悬停显示标题
	
	
	
测试1
	
测试2
	
测试3
	
测试4