JS如何实现TITLE悬停长久显示效果
小编给大家分享一下JS如何实现TITLE悬停长久显示效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站制作、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的柯坪网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
具体如下：
JS控制TITLE悬停效果
/**
* className 类名
* tagname HTML标签名，如div,td,ul等
* @return Array 所有class对应标签对象组成的数组
* @example
abc
var abc = getClass('abc');
for(i=0;i
";
}
//每次拼入一个字符
output_string += string.substring(i,i+1);
}
return output_string;
}
/**
* 鼠标悬停显示TITLE
* @params obj 当前悬停的标签
*
*/
function titleMouseOver(obj,event,words_per_line) {
//无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:18px;' //行间距
+'font-size:12px; padding: 2px 5px;'; //字体大小、内间距
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 = '18px';
title_show.style.padding = '2px 5px';
}
}
//存储并删除原TITLE
document.title_value = obj.title;
obj.title = '';
//单行字数未设定，非数值，则取默认值50
if(typeof words_per_line == 'undefined' || isNaN(words_per_line)){
words_per_line = 50;
}
//格式化成整形值
words_per_line = parseInt(words_per_line);
//在title_show中按每行限定字数显示标题内容，模拟TITLE悬停效果
title_show.innerHTML = split_str(document.title_value,words_per_line);
//显示悬停效果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 + 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,words_per_line){
if(typeof objs != 'object') return false;
//单行字数未设定，非数值，则取默认值50
if(typeof words_per_line == 'undefined' || isNaN(words_per_line)){
words_per_line = 50;
}
for(i=0;i
鼠标悬停[原生版本]
鼠标悬停[直接调用函数版本,设定行字数]
鼠标悬停[class控制版本]
鼠标悬停[直接调用函数版本,默认行字数]
以上是“JS如何实现TITLE悬停长久显示效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
当前文章：JS如何实现TITLE悬停长久显示效果
标题链接：http://kswsj.com/article/gccscc.html
在线咨询
在线咨询
