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 相关文章推荐
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
javascript每日必学之循环
Feb 19 Javascript
angular2使用简单介绍
Mar 01 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 Javascript
OpenLayer学习之自定义测量控件
Sep 28 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
Php图像处理类代码分享
2012/01/19 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
简单介绍Python中的JSON使用
2015/04/28 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
python基于ID3思想的决策树
2018/01/03 Python
Python函数装饰器实现方法详解
2018/12/22 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
Python实现手势识别
2020/10/21 Python
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
百联网上商城:i百联
2017/01/28 全球购物
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
初中生期末考试的自我评价
2013/12/17 职场文书
体育口号大全
2014/06/18 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android