快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

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://6mz.cn/article/gccscc.html

其他资讯