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 相关文章推荐
Javascript自定义排序 node运行 实例
Jun 05 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
小程序实现多选框功能
Oct 30 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
小程序跳转H5页面的方法步骤
Mar 06 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 checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
js获取form的方法
2015/05/06 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
Python入门篇之编程习惯与特点
2014/10/17 Python
利用Python演示数型数据结构的教程
2015/04/03 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
windows下ipython的安装与使用详解
2016/10/20 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
Pygame框架实现飞机大战
2020/08/07 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
单位刻章介绍信范文
2014/01/11 职场文书
《画风》教学反思
2014/04/16 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
投资入股合作协议书
2014/10/28 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers