html 悬停显示标题,JS实现TITLE悬停长久显示效果完整示例
本文实例讲述了JS实现TITLE悬停长久显示效果。分享给大家供大家参考,具体如下:
JS控制TITLE悬停效果
/**
* className 类名
* tagname HTML标签名,如div,td,ul等
* @return Array 所有class对应标签对象组成的数组
* @example
var abc = getClass('abc');
for(i=0;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
//如果当前字符是每行显示的字符数的倍数,输出换行
if(i%words_per_line == 0) {
output_string += "
";
}
//每次拼入一个字符
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[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
}
tr{float:left; margin:0 50px;}
鼠标悬停[原生版本] |
οnmοuseοver="titleMouseOver(this,event,15);" οnmοuseοut="titleMouseOut(this);">鼠标悬停[直接调用函数版本,设定行字数] |
鼠标悬停[class控制版本] |
οnmοuseοver="titleMouseOver(this,event);" οnmοuseοut="titleMouseOut(this);">鼠标悬停[直接调用函数版本,默认行字数] |
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。
希望本文所述对大家JavaScript程序设计有所帮助。
html 悬停显示标题,JS实现TITLE悬停长久显示效果完整示例相关推荐
- html悬停显示图片,JS实现悬停单元格显示图片
2.1 准备模板 1)准备内置模板: %FR_HOME%\webroot\WEB-INF\reportlets\doc\Parameter\DynamicCol\函数实现动态列.cpt 打开模板,模板 ...
- js html css淘宝足迹日历效果,js实现简单的日历显示效果函数示例
本文实例讲述了js实现简单的日历显示效果函数.分享给大家供大家参考,具体如下: 用一个函数简单的实现一个月份的日历,效果如下: 这个日历效果有高亮显示,我实现的思维比较简单. 我把上面的日历效果用表格 ...
- 鼠标悬停显示图片html5,JavaScript 鼠标悬停图片,显示隐藏文本
Unsplash 当我们在浏览网页的时候,描述性的文本通常不会跟在图片之后,而是当我们将鼠标移至图片上时,才会将文本显示出来,这样的好处是,以突显图片为主,并节省布局空间 HTML 结构如下 世界上最 ...
- html鼠标悬停改变背景,js设置鼠标悬停改变背景色实现详解_哒哒_前端开发者
看了网上那么多的 this is test! }); function changBkColor(obj){ obj.οnmοuseοver=function(){ this.className=&q ...
- java 鼠标悬停显示文字_IntelliJ在鼠标悬停时显示JavaDocs工具提示
对于IntelliJ 13,IDE设置的编辑器页面中有一个复选框 在此处输入图片说明 编辑:对于IntelliJ 14,该选项已移至"编辑器">"常规"页 ...
- html5表格图片按比例缩放,JS图片等比例缩放方法完整示例
本文实例讲述了JS图片等比例缩放方法.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional ...
- html加js动态效果图,JS动态图片的实现方法完整示例
本文实例讲述了JS动态图片的实现方法.分享给大家供大家参考,具体如下: js-是动态实现图片显示 // 设置图片的动态效果 function photoOper(ph,photo){ // 获取图片对 ...
- js与php表单验证,JS简单表单验证功能完整示例
本文实例讲述了JS简单表单验证功能.分享给大家供大家参考,具体如下: 简单js表单验证demo Document //当用户名获取焦点时 function focus_username(){ docu ...
- html用title属性实现鼠标悬停显示文字
实现鼠标悬停显示文字,html中使用title属性就可实现显示文字的效果,这个属性还是比较实用的,需要的朋友可以参考下 <a href=# title="这里是显示的文字"& ...
最新文章
- Variant Analysis(变种分析)——使用已知漏洞发掘未知漏洞
- 理解离散傅立叶变换(一)
- maven_结合使用嵌入式Tomcat和Maven tomcat插件
- 使用EditPlus 删除文本文件中多余的空行 和 EditPlus 选择列
- 015 Android之可执行文件dex
- 【UML】UML类图关系(泛化 、继承、实现、依赖、关联、聚合、组合)
- 错误记录集锦(遇到则记下)
- JavaScript中的回调地狱及解决方法
- 搜索引擎提交软件_增加SEO超级外链须知的高权重网站目录提交方法
- 深度学习都是非凸问题_神经网络的损失函数为什么是非凸的?
- android 监听布局改变,Android通过监听最外层布局的改变监听键盘的状态,软键盘的弹出和收起都会改变外层布局(前提是把Activity的mode设置成压缩);...
- C++11 多线程 基础
- 1.13 编程基础之综合应用 10 判决素数个数 python
- Leetcode算法题(C语言)11--有效的数独
- Linux环境安装Postgresql报错。configure: error: zlib library not found
- LIBOR-OIS息差利率 伦敦银行同业拆息与隔夜指数掉期
- 香槟分校计算机研究生专业,伊利诺伊大学香槟分校计算机专业排名好不好?
- MyBase 与 HTML Help Workshop 编辑chm
- 在绩效评估中使用 360 反馈
- SYN和FIN同时设置攻击
热门文章
- 1、深入理解 Laravel Eloquent(一)——基本概念及用法
- struts2 上传文件 HTTP Status 404 - No result defined for action.....and result input
- navicat 备份 mysql 报错 1548 cannot load mysql.proc
- Shell脚本中date的用法小结
- logrotate 命令切换linux系统日志
- 网上无意中看到的一句话。。。
- a4服务器型号有什么不一样,一套远程可视化服务器,如在本机上编程一样丝滑的方案...
- 用户与组在Linux 菜单,linux 用户和组的管理
- 测试人员必看——掌握7大技能,做好自动化测试就不是问题!
- java 元祖_在java中对元组列表进行排序的有效方法