标签title属性现实内容时间变长,重写标签的onmouseover、onmouseou方法
来源:互联网 发布:印尼网络制式 编辑:程序博客网 时间:2024/05/17 01:35
首先写几个方法
1、获取标签绝对位置方法
- //获取当前的x坐标值
- function pageX(elem){
- return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;
- }
- //获取当前的Y坐标值
- function pageY(elem){
- return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;
- }
2、处理需要现实的文字内容
- function split_str(string,words_per_line) {
- var output_string = string.substring(0,1); //取出i=0时的字,避免for循环里换行时多次判断i是否为0
- 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;
- }
3、鼠标移入移出触发事件
- var title_value = '';
- function title_show(pSpan) {
- var span=document.getElementById(pSpan)
- var div=document.getElementById("title_show");
- title_value = span.title;
- div.style.left = pageX(span)+200+'px';
- div.style.top = pageY(span)+'px';
- var words_per_line = 40; //每行字数
- var title = split_str(span.title,words_per_line); //按每行25个字显示标题内容。
- div.innerHTML = title;
- div.style.display = '';
- span.title = ''; //去掉原有title显示。
- }
- function title_back(pSpan) {
- var span=document.getElementById(pSpan)
- var div=document.getElementById("title_show");
- span.title = title_value;
- div.style.display = "none";
- }
- <table border="1">
- <tr>
- <td >
- <span style="" id="span1" title ='这里是很长很长很长很长很长 很长很长很长很长很长很长很长很长很长 很长很长很长很长很长很长很长很长很长 很长很长很长很长很长很长很长很长很长 很长很长很长很长很长很长很长很长很长的标题'
- onmouseover="title_show('span1');" onmouseout="title_back('span1');">
- 鼠标在这悬停显示标题
- </span>
- </td>
- <td>测试1</td>
- <td>测试2</td>
- <td>测试3</td>
- <td>测试4</td>
- </tr>
- <tr>
- <td >
- <span style="" id="span2" title ='这里是很长很长很长很长很长 很长很长很长很长很长很长很长很长很长 '
- onmouseover="title_show('span2');" onmouseout="title_back('span2');">
- 鼠标在这悬停显示标题
- </span>
- </td>
- <td>测试1</td>
- <td>测试2</td>
- <td>测试3</td>
- <td>测试4</td>
- </tr>
- <tr>
- <td >
- <span style="" id="span3" title ='测试title'
- onmouseover="title_show('span3');" onmouseout="title_back('span3');">
- 鼠标在这悬停显示标题
- </span>
- </td>
- <td>测试1</td>
- <td>测试2</td>
- <td>测试3</td>
- <td>测试4</td>
- </tr>
- </table>
- <span id='title_show' style='position: absolute; display: none; border: solid 1px #999999; background: #edeef0;'></span>
阅读全文
0 0
- 标签title属性现实内容时间变长,重写标签的onmouseover、onmouseou方法
- a标签的title属性
- link 标签的 title 属性
- a标签的title属性
- html title换行方法 如a链接标签内title属性鼠标悬停提示内容换行
- html title换行方法 如a链接标签内title属性鼠标悬停提示内容换行
- html title换行方法 如a链接标签内title属性鼠标悬停提示内容换行
- html title换行方法 如a链接标签内title属性鼠标悬停提示内容换行
- html title换行方法 如a链接标签内title属性鼠标悬停提示内容换行
- html title换行方法 如a链接标签内title属性鼠标悬停提示内容换行
- 标签title属性
- onmouseover支持的html标签
- img标签的alt和title属性
- img标签的alt和title属性
- img标签的属性title和alt
- 自定义Html的Title标签显示时间
- 自定义Html的Title标签显示时间
- <img>标签的alt属性与title属性的区别
- Android h5全屏播放video
- Android获取屏幕的宽高的方法
- DevExpress DateEdit 5 常见问题解决方法
- Ext.toolbar.Toolbar工具栏
- Windows 10 /win10 上使用GIT慢的问题,或者命令行反应慢的问题
- 标签title属性现实内容时间变长,重写标签的onmouseover、onmouseou方法
- Normalize.css 与传统的 CSS Reset 有哪些区别?
- 采用基于MQTT的ActiveMQ实现消息推送
- 性能测试实施(2)之典型交易选取
- 使用win8.1安装tensorflow CPU一次成功
- vue学习笔记03
- suse11sp3双网卡bind
- C++多线程编程入门
- 编了那么久的程序了,总该有些啥吧。