编程 Javascript

jQuery实现行文字链接提示效果的方法

Posted in Javascript onMarch 10, 2015

本文实例讲述了jQuery实现行文字链接提示效果的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>一行文字的提示效果</title>

<script type='text/javascript' src='/ajaxjs/jquery1.3.2.js'></script>

<script type="text/javascript">

   $(function(){

     $(".div ul li").hover(function(e){

       var x=e.pageX;

       var y=e.pageY;

       var div=$("<div id='div_show'></div>");

        var text=$(this).html();

        $(this).append(div);

    $("#div_show").html(text).css({"height":"25px","position":"absolute","zIndex":"99","backgroundColor":"#38F758","whiteSpace":"nowrap","paddingLeft":"15px","paddingRight":"15px","top":y+10+"px","left":x+10+"px"});

        $("this").children("#div_show").show();

     },function(){

        $(this).children("#div_show").remove();

     })

   })

</script>

<style type="text/css">

ul{ margin:0; padding:0;}

ul li{ list-style:none;}

.div{ width:200px;  float:left; display:inline; }

.div ul li{ width:220px; padding:0px 6px; line-height:25px; height:25px; margin-top:1px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

</style>

</head>

<body>

<div class="div">

<ul>

 <li>好吧，现在流行HTML5，我就给它标题加上个HTML5吧</li>

 <li>Raphael js库是在webrebuild交流会上听到的</li>

 <li>我们来简单了解一下上文中提到的css appearance</li>

</ul>

</div>

</body>

</html>

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

- Author -

hcqenjoy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery实现获取绑定自定义事件元素的方法

Dec 02 Javascript

浅析Bootstrap缩略图组件与警示框组件

Apr 29 Javascript

Angularjs过滤器使用详解

May 25 Javascript

JS获取地址栏参数的两种方法(简单实用)

Jun 14 Javascript

jQuery的Each比JS原生for循环性能慢很多的原因

Jul 05 Javascript

js操作DOM--添加、删除节点的简单实例

Jul 08 Javascript

Bootstrap Table使用心得总结

Nov 29 Javascript

canvas实现动态小球重叠效果

Feb 06 Javascript

Vue列表页渲染优化详解

Jul 24 Javascript

Node.js Buffer用法解读

May 18 Javascript

jQuery中each遍历的三种方法实例分析

Sep 07 jQuery

js实现黑白div块画空心的图形

Dec 13 Javascript

jQuery实现锚点scoll效果实例分析

Mar 10 #Javascript

jQuery实现Div拖动+键盘控制综合效果的方法

Mar 10 #Javascript

jQuery仿Flash上下翻动的中英文导航菜单实例

Mar 10 #Javascript

js控制页面的全屏展示和退出全屏显示的方法

Mar 10 #Javascript

Javascript 正则表达式实现为数字添加千位分隔符

Mar 10 #Javascript

jquery+easeing实现仿flash的载入动画

Mar 10 #Javascript

javascript判断css3动画结束 css3动画结束的回调函数

Mar 10 #Javascript

You might like

php的chr和ord函数实现字符加减乘除运算实现代码

2011/12/05 PHP

Codeigniter校验ip地址的方法

2015/03/21 PHP

PHP设计模式之工厂模式实例总结

2017/09/01 PHP

php实现的中秋博饼游戏之绘制骰子图案功能示例

2017/11/06 PHP

jQuery autocomplete插件修改

2009/04/17 Javascript

一个基于jquery的文本框记数器

2012/09/19 Javascript

jQuery Validate插件实现表单强大的验证功能

2015/12/18 Javascript

javascript中arguments,callee,caller详解

2016/03/16 Javascript

JavaScript兼容浏览器FF/IE技巧

2016/08/14 Javascript

jQuery实现字符串全部替换的方法

2016/12/12 Javascript

javascript解析ajax返回的xml和json格式数据实例详解

2017/01/05 Javascript

js实现文字跑马灯效果

2017/02/23 Javascript

JavaScript生成图形验证码

2020/08/24 Javascript

Vue表单类的父子组件数据传递示例

2018/05/03 Javascript

了解JavaScript表单操作和表单域

2019/05/27 Javascript

解决在layer.open中使用时间控件laydate失败的问题

2019/09/11 Javascript

详解简单易懂的 ES6 Iterators 指南和示例

2019/09/24 Javascript

用python实现的去除win下文本文件头部BOM的代码

2013/02/10 Python

Python基于checksum计算文件是否相同的方法

2015/07/09 Python

用Python的Django框架来制作一个RSS阅读器

2015/07/22 Python

Django数据库连接丢失问题的解决方法

2018/12/29 Python

python批量识别图片指定区域文字内容

2019/04/30 Python

PyQT5 emit 和 connect的用法详解

2019/12/13 Python

如何在mac环境中用python处理protobuf

2019/12/25 Python

Python实现链表反转的方法分析【迭代法与递归法】

2020/02/22 Python

Nanushka官网：匈牙利服装品牌

2019/08/14 全球购物

泰国第一在线超市：Tops

2021/02/13 全球购物

简历中自我评价范文3则

2013/12/14 职场文书

土木工程专业个人求职信

2013/12/30 职场文书

青年文明号事迹材料

2014/01/18 职场文书

《周恩来的四个昼夜》观后思想汇报范文两篇

2014/09/10 职场文书

销售代理协议书

2014/09/30 职场文书

委托证明范本

2014/11/25 职场文书

500字小学生检讨书

2015/02/19 职场文书

技术入股协议书

2016/03/22 职场文书

Go获取两个时区的时间差

2022/04/20 Golang