自定义html 标签中的 title属性,感觉默认title 难看,强迫症专用_td title 可复制-程序员宅基地

技术标签: css  html  title  

转自网络,可直接copy使用。
在实际的开发过程中,如过不想新出明细的页面,就可以用title的属性把明细信息都让鼠标悬浮的时候显示出来,但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=gbk">
<title>JS控制TITLE悬停效果 - veryhuo.com</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);
}
}
}
// Downloads By http://www.veryhuo.com
//初始化,当页面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><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果,请按Ctrl+F5刷新本页。</div>

 

最后效果图:

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_27404929/article/details/101373040

智能推荐

从本地或者网络读取图片,并转换为Bitmap图片_java 读取网页图像到bitmap-程序员宅基地

文章浏览阅读6.6k次。在做android项目时,我们经常需要从本地或者网络读取图片,并转换为Bitmap图片,以便使用,下面是读取本地图片并转换的方法:Java代码 /** * 得到本地或者网络上的bitmap url - 网络或者本地图片的绝对路径,比如: * * A.网络路径: url="http://blog.foreverlov_java 读取网页图像到bitmap

计算机组成原理|多功能ALU设计实验_设计一个具有8种运算功能的32位alu实验总结-程序员宅基地

文章浏览阅读9.8k次,点赞7次,收藏118次。多功能ALU设计实验一、实验目的与要求实验目的:(1)学习多功能ALU的工作原理,掌握运算器的设计方法(2)掌握运用Verilog HDL 进行行为描述与建模的技巧和方法实验要求:本实验要求设计一个具有8种运算功能的32位ALU,并能够产生运算结果的标志:结果为零标志ZF(Zero Flag)、溢出标志OF(Overflow Flag)。ALU通过3根控制线ALU_OP[2:0]..._设计一个具有8种运算功能的32位alu实验总结

iOS开发进阶之列表加载图片-程序员宅基地

文章浏览阅读484次,点赞10次,收藏5次。列表加载图片通常使用UITableView或UICollectionView,由于列表中内容数量不确定并且对于图片质量要求也不确定,所以对于图片加载的优化是很有必要的。

29、基于51单片机智能消防灭火小车 寻光自动红外壁障车设计_灭火小车设计方案-程序员宅基地

文章浏览阅读1k次,点赞2次,收藏16次。智能作为现代的新发明,是以后的发展方向,他可以按照预先设定的模式在一个环境里自动的运作,不需要人为的管理,可应用于科学勘探等等的用途。智能小车就是其中的一个体现,本次设计的多功能智能灭火避障小车,以STC89C52单片机作为微控制器,设计出一种可以寻找火源(火源以蜡烛模拟)和自动避开障碍物的小车。通过光敏晶体管传感器检测火源信号当检测到火源,小车自动调整姿态,对准火源。灭火电机启动将蜡烛吹灭实现模拟灭火。通过红外光电开关感应控制小车避障行驶。工作状态实时显示在1602液晶上。_灭火小车设计方案

Ubuntu虚拟机总是死机,然后重启就进不去打不开了怎么办_ubuntu卡死之后重启,打不开了-程序员宅基地

文章浏览阅读4.6k次。从网上搜到的方法都解决不了我的问题,分享一点我自己的实在的解决经验:养成保存快照的习惯,比什么方法都靠谱。 即打开VMWare->虚拟机->快照->拍摄快照,简单填写一下你现在做到的程度,然后点击拍摄快照,存一下,养成习惯,每做出些什么东西了,就存一个快照,哪天莫名其妙又死机了,开机又黑屏进不去了,直接用快照恢复到最近的进度继续做就好。..._ubuntu卡死之后重启,打不开了

随便推点

在Qt中使用CreateProcess打开命令行并执行命令_qt.createqprocess()-程序员宅基地

文章浏览阅读351次。在Qt应用程序中,执行命令行命令并获取输出结果可以使用QProcess类。现在,我们可以在Qt应用程序中调用这个函数来执行命令行命令并获取输出结果。现在,我们可以在Qt应用程序中调用这个函数来执行命令行命令并获取输出结果。在上面的示例中,我们将命令设置为"dir",这将列出当前目录的内容。在上面的示例中,我们将命令设置为"dir",这将列出当前目录的内容。这样,当我们点击按钮时,程序将执行命令并将输出结果显示在文本编辑器中。这样,当我们点击按钮时,程序将执行命令并将输出结果显示在文本编辑器中。_qt.createqprocess()

java logutil_Java日志组件1---Jdk自带Logger(java.util.logging.Logger)-程序员宅基地

文章浏览阅读216次。最近在看日志的一些东西,发现利用JDK自带的log也可以简单的实现日志的输出,将日志写入文件的过程记录如下:1、新建LogUtil.Java(里面写了几个静态方法,为log设置等级、添加log控制台handler、添加log文件输出handler)packagecn.darkranger.log.logger;importjava.io.IOException;importjava.text.S..._logutil.java

此时不应有 \scala\bin\..\lib\jline-2.14.5.jar_c:\users\dell>scala 此时不应有 \scala\bin\..\lib\jline--程序员宅基地

文章浏览阅读221次。scala安装时,此时不应有 \scala\bin…\lib\jline-2.14.5.jar那是因为安装Scala时,默认安装到Program Files (x86)或者Program Files下,但是这俩个文件夹命名存在空格,这是从新安装,选择没有空格存在的文件夹下面即可。谢谢..._c:\users\dell>scala 此时不应有 \scala\bin\..\lib\jline-2.14.5.jar

本地搭建docker仓库的详细步骤_本地安装docker-程序员宅基地

文章浏览阅读1.7k次。在本地创建一个用于存储Docker镜像的目录,比如 /data/docker-registry。如果需要加速拉取公共镜像,可以配置阿里云或DaoCloud等国内提供的Docker镜像加速器。如果需要在其他机器上访问该私有仓库,则需要配置证书。使用docker tag将本地构建好的镜像打标签,并推送到私有仓库中。在官网下载Docker安装包进行安装,具体操作方式可以参考官方文档。至此,本地Docker仓库搭建完成。配置客户端访问证书(可选)拉取Registry镜像。启动Registry容器。_本地安装docker

Docker 停止容器_docker停止运行中的容器-程序员宅基地

文章浏览阅读2w次。使用docker stop停止一个容器docker stop可以用来终止一个正在运行的容器。它的命令格式如下:docker stop [OPTIONS] Container [Container …]其中:docker stop: Docker停止容器的命令关键词;OPTIONS:命令选项,其中-t指定等待多少秒后如果容器还没终止,就强行停止,默认等待10秒;Container:需要启动的容器,该容器用“容器ID”或“容器名”表示,如果指定了多个容器,那么就将这些容器都启动。例如想要停止一个名_docker停止运行中的容器

3DMax主要应用在游戏公司,和建筑动画方面有很多优点如下_游戏建模中哪些东西可以用到公司-程序员宅基地

文章浏览阅读488次。ZBrush、Maya和3dmax的区别?我们知道,做三维设计、建模的软件有很多,最常见的有3DMAX、Maya和ZBrush, 那这几款软件之间有什么区别呢?ZBrush、Maya和3dmax的区别。zbrush首先,我们先来说3DMax和Maya这两款软件。 3DMax和Maya都属于三维制作软件,两者的很多功能基本相同,但是操作上的差异很大。功能上来说,两款软件都可以制作出3D模型,效果图,动画,影视。但是效果,制作方便程度上确实有差别。也不能做那个好那个不好,因为两款软件的定位目标不一样_游戏建模中哪些东西可以用到公司