资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

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://cdkjz.cn/article/gccscc.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
成都服务器租用网站建设报价方案网站排名网站建设贵州义龙电信机房ssl证书申请微信小程序开发网站解决方案成都小程序开发公司混凝土搅拌车

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图