本文实例讲述了JS实现TITLE悬停长久显示效果。分享给大家供大家参考,具体如下:
JS控制TITLE悬停效果
/**
*className类名
*tagnameHTML标签名,如div,td,ul等
*@returnArray所有class对应标签对象组成的数组
*@example
abc
varabc=getClass('abc');
for(i=0;i
";
}
//每次拼入一个字符
output_string+=string.substring(i,i+1);
}
returnoutput_string;
}
/**
*鼠标悬停显示TITLE
*@paramsobj当前悬停的标签
*
*/
functiontitleMouseOver(obj,event,words_per_line){
//无TITLE悬停,直接返回
if(typeofobj.title=='undefined'||obj.title=='')returnfalse;
//不存在title_show标签则自动新建
vartitle_show=document.getElementById("title_show");
if(title_show==null){
title_show=document.createElement("div");//新建Element
document.getElementsByTagName('body')[0].appendChild(title_show);//加入body中
varattr_id=document.createAttribute('id');//新建Element的id属性
attr_id.nodeValue='title_show';//为id属性赋值
title_show.setAttributeNode(attr_id);//为Element设置id属性
varattr_style=document.createAttribute('style');//新建Element的style属性
attr_style.nodeValue='position:absolute;'//绝对定位
+'border:solid1px#999999;background:#EDEEF0;'//边框、背景颜色
+'border-radius:2px;box-shadow:2px3px#999999;'//圆角、阴影
+'line-height:18px;'//行间距
+'font-size:12px;padding:2px5px;';//字体大小、内间距
try{
title_show.setAttributeNode(attr_style);//为Element设置style属性
}catch(e){
//IE6
title_show.style.position='absolute';
title_show.style.border='solid1px#999999';
title_show.style.background='#EDEEF0';
title_show.style.lineHeight='18px';
title_show.style.fontSize='18px';
title_show.style.padding='2px5px';
}
}
//存储并删除原TITLE
document.title_value=obj.title;
obj.title='';
//单行字数未设定,非数值,则取默认值50
if(typeofwords_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;//鼠标、键盘事件
vartop_down=15;//下移15px避免遮盖当前标签
//最左值为当前鼠标位置与body宽度减去悬停效果DIV宽度的最小值,否则将右端导致遮盖
varleft=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
*@paramsobj当前悬停的标签
*
*/
functiontitleMouseOut(obj){
vartitle_show=document.getElementById("title_show");
//不存在悬停效果,直接返回
if(title_show==null)returnfalse;
//存在悬停效果,恢复原TITLE
obj.title=document.title_value;
//隐藏悬停效果DIV
title_show.style.display="none";
}
/**
*悬停事件绑定
*@paramsobjs所有需要绑定事件的Element
*
*/
functionattachEvent(objs,words_per_line){
if(typeofobjs!='object')returnfalse;
//单行字数未设定,非数值,则取默认值50
if(typeofwords_per_line=='undefined'||isNaN(words_per_line)){
words_per_line=50;
}
for(i=0;i
鼠标悬停[原生版本]
鼠标悬停[直接调用函数版本,设定行字数]
鼠标悬停[class控制版本]
鼠标悬停[直接调用函数版本,默认行字数]
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。