富贵资源网

JS实现TITLE悬停长久显示效果完整示例
站长资源 2024/11/13 佚名
54 1538
富贵资源网 Design By www.hznty.com

本文实例讲述了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.jb51.net/code/HtmlJsRun测试一下运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

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

富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
www.hznty.com 富贵资源网
20,135影音资源
44,641技术资源
2,817软件资源
435,032站长资源

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
富贵资源网 Design By www.hznty.com