平武建站

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://pwwzsj.com/article/gccscc.html

其他资讯