JS实现TITLE悬停长久显示效果完整示例


Posted in Javascript onFebruary 11, 2020

本文实例讲述了JS实现TITLE悬停长久显示效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS控制TITLE悬停效果</title>
<script type="text/javascript">
/**
 * className 类名
 * tagname HTML标签名,如div,td,ul等
 * @return Array 所有class对应标签对象组成的数组
 * @example
 <div class="abc">abc</div>
 var abc = getClass('abc');
 for(i=0;i<abc.length;i++){
   abc[i].style.backgroundColor='red';
 }
*/
function getClass(className,tagname) {
  //tagname默认值为'*',不能直接写成默认参数方式getClass(className,tagname='*'),否则IE下报错
  if(typeof tagname == 'undefined') tagname = '*';
  if(typeof(getElementsByClassName) == 'function') {
    return getElementsByClassName(className);
  }else {
    var tagname = document.getElementsByTagName(tagname);
    var tagnameAll = [];
    for(var i = 0; i < tagname.length; i++) {
      if(tagname[i].className == className) {
        tagnameAll[tagnameAll.length] = tagname[i];
      }
    }
    return tagnameAll;
  }
}
/**
 * JS字符切割函数
 * @params   string        原字符串
 * @params  words_per_line    每行显示的字符数
 */
function split_str(string,words_per_line) {
  //空串,直接返回
  if(typeof string == 'undefined' || string.length == 0) return '';
  //单行字数未设定,非数值,则取默认值50
  if(typeof words_per_line == 'undefined' || isNaN(words_per_line)){
    words_per_line = 50;
  }
  //格式化成整形值
  words_per_line = parseInt(words_per_line);
  //取出i=0时的字,避免for循环里换行时多次判断i是否为0
  var output_string = string.substring(0,1);
  //循环分隔字符串
  for(var i=1;i<string.length;i++) {
    //如果当前字符是每行显示的字符数的倍数,输出换行
    if(i%words_per_line == 0) {
      output_string += "<br/>";
    }
    //每次拼入一个字符
    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<objs.length;i++){
    objs[i].onmouseover = function(event){
      titleMouseOver(this,event,words_per_line);
    }
    objs[i].onmouseout = function(event){
      titleMouseOut(this);
    }
  }
}
//初始化,当页面onload的时候,对所有class="title_hover"的标签绑定TITLE悬停事件
window.onload = function(){
  attachEvent(getClass('title_hover'),18);  //行字数设定为18
}
</script>
</head>
<body>
<style>
tr{float:left; margin:0 50px;}
</style>
<table>
  <tr>
    <td title="这个是默认的TITLE这个是默认的TITLE这个是默认的TITLE这个是默认的TITLE这个是默认的TITLE这个是默认的TITLE">鼠标悬停[原生版本]</td>
  </tr>
  <tr>
    <td title="这个是JS实现悬停的TITLE这个是JS实现悬停的TITLE这个是JS实现悬停的TITLE这个是JS实现悬停的TITLE这个是JS实现悬停的TITLE"
    οnmοuseοver="titleMouseOver(this,event,15);" οnmοuseοut="titleMouseOut(this);">鼠标悬停[直接调用函数版本,设定行字数]</td>
  </tr>
  <tr>
    <td class="title_hover" title="ABCTesterABCTesterABCTesterABCTesterABCTesterABCTesterABCTester">鼠标悬停[class控制版本]</td>
  </tr>
  <tr>
    <td title="这个是JS实现悬停的TITLE这个是JS实现悬停的TITLE这个是JS实现悬停的TITLE这个是JS实现悬停的TITLE这个是JS实现悬停的TITLE"
    οnmοuseοver="titleMouseOver(this,event);" οnmοuseοut="titleMouseOut(this);">鼠标悬停[直接调用函数版本,默认行字数]</td>
  </tr>
</table>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试一下运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js左侧多级菜单动态的解决方案
Feb 01 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
Angular6中使用Swiper的方法示例
Jul 09 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 #Javascript
vue-resourc发起异步请求的方法
Feb 11 #Javascript
js实现圆形显示鼠标单击位置
Feb 11 #Javascript
JavaScript实现省份城市的三级联动
Feb 11 #Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 #Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 #Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 #Javascript
You might like
如何利用php+mysql保存和输出文件
2006/10/09 PHP
加速XP搜索功能堪比vista
2007/03/22 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
PHP count()函数讲解
2019/02/03 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
Mootools 1.2教程 事件处理
2009/09/15 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
python+Django+apache的配置方法详解
2016/06/01 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
Python的UTC时间转换讲解
2019/02/26 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
大学毕业生的自我鉴定
2013/11/30 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python