js 兼容性的问题，求赐教！

xiaoming00x 2014-03-10 01:49:00

首先看一下效果，测试用的360浏览器 6.3版

兼容模式正常如图

极速模式显示不正常如图

html 代码



<script src="titletime.js" ></script>

<span title="03010:这个是一个测试<br/>03020:这个还是个测试<br/>01001:这个不是了"

onmouseover="titleMouseOver(this,event);" onmouseout="titleMouseOut(this);">fdsafdsa



</span>

js 代码 titletime.js



/**

* className 类名

* tagname HTML标签名，如div,td,ul等

* @return Array 所有class对应标签对象组成的数组

* @example

*/

function getClass(className,tagname) {

//tagname默认值为'*'，不能直接写成默认参数方式getClass(className,tagname='*')，否则IE下报错

if(typeof tagname == 'undefined') tagname = '*';

if(typeof(getElementsByClassName) == 'function') {

return getElementsByClassName(className);

}else {

var tagname = document.getElementsByTagName(tagname);

var tagnameAll = [];

for(var i = 0; i < tagname.length; i++) {

if(tagname[i].className == className) {

tagnameAll[tagnameAll.length] = tagname[i];

}

}

return tagnameAll;

}

}

/**

* JS字符切割函数

* @params     string                原字符串

* @params    words_per_line        每行显示的字符数

*/

function split_str(string) {

//空串，直接返回

if(typeof string == 'undefined' || string.length == 0) return '';



//取出i=0时的字，避免for循环里换行时多次判断i是否为0

var output_string = string.substring(0,1);



for(var i=1;i<string.length;i++) {

//如果当前字符是每行显示的字符数的倍数，输出换行



//每次拼入一个字符

output_string += string.substring(i,i+1);

}

 

return output_string;

}



/**

* 鼠标悬停显示TITLE

* @params     obj        当前悬停的标签

*

*/

function titleMouseOver(obj,event) {

//无TITLE悬停，直接返回

if(typeof obj.title == 'undefined' || obj.title == '') return false;

//不存在title_show标签则自动新建

var title_show = document.getElementById("title_show");

if(title_show == null){

title_show = document.createElement("div");                            //新建Element

document.getElementsByTagName('body')[0].appendChild(title_show);    //加入body中

var attr_id = document.createAttribute('id');                        //新建Element的id属性

attr_id.nodeValue = 'title_show';                                    //为id属性赋值

title_show.setAttributeNode(attr_id);                                //为Element设置id属性

var attr_style = document.createAttribute('style');                    //新建Element的style属性

attr_style.nodeValue = 'position:absolute;'                            //绝对定位

+'border:solid 1px #999999; background:#EDEEF0;'                //边框、背景颜色

+'border-radius:2px;box-shadow:2px 3px #999999;'                //圆角、阴影

+'line-height:4px;'                                            //行间距

+'font-size:12px; padding: 2px 2px;';                            //字体大小、内间距

try{

title_show.setAttributeNode(attr_style);                        //为Element设置style属性

}catch(e){

//IE6

title_show.style.position = 'absolute';

title_show.style.border = 'solid 1px #999999';

title_show.style.background = '#EDEEF0';

title_show.style.lineHeight = '18px';

title_show.style.fontSize = '12px';

title_show.style.padding = '2px 5px';

}

}

//存储并删除原TITLE

document.title_value = obj.title;

obj.title = '';



title_show.innerHTML = split_str(document.title_value);

//显示悬停效果DIV

title_show.style.display = 'block';

//根据鼠标位置设定悬停效果DIV位置

event = event || window.event;                            //鼠标、键盘事件

var top_down = 15;                                        //下移15px避免遮盖当前标签

//最左值为当前鼠标位置 与 body宽度减去悬停效果DIV宽度的最小值，否则将右端导致遮盖

var left = Math.min(event.clientX,document.body.clientWidth-title_show.clientWidth);

title_show.style.left = left+"px";            //设置title_show在页面中的X轴位置。

title_show.style.top = (event.clientY + document.documentElement.scrollTop+top_down)+"px";    //设置title_show在页面中的Y轴位置。

}



/**

* 鼠标离开隐藏TITLE

* @params  obj  当前悬停的标签

*

*/

function titleMouseOut(obj) {

var title_show = document.getElementById("title_show");

//不存在悬停效果，直接返回

if(title_show == null) return false;

//存在悬停效果，恢复原TITLE

obj.title = document.title_value;

//隐藏悬停效果DIV

title_show.style.display = "none";

}

/**

* 悬停事件绑定

* @params    objs        所有需要绑定事件的Element

*

*/

function attachEvent(objs){

if(typeof objs != 'object') return false;



for(i=0;i<objs.length;i++){

objs[i].onmouseover = function(event){

titleMouseOver(this,event);

}

objs[i].onmouseout = function(event){

titleMouseOut(this);

}

}

}