编程 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 相关文章推荐

javascript ie6兼容position:fixed实现思路

Apr 01 Javascript

jquery中ajax使用error调试错误的方法

Feb 08 Javascript

js获得当前系统日期时间的方法

May 06 Javascript

Jqgrid之强大的表格插件应用

Dec 02 Javascript

详解Backbone.js框架中的模型Model与其集合collection

May 05 Javascript

巧用Javascript的逻辑运算符

Dec 02 Javascript

详解JavaScript调用栈、尾递归和手动优化

Jun 03 Javascript

自定义vue全局组件use使用、vuex的使用详解

Jun 14 Javascript

微信小程序监听手势滑动切换页面实例详解

Jun 15 Javascript

基于JavaScript实现图片连播和联级菜单实例代码

Jul 28 Javascript

JS简单实现点击跳转登陆邮箱功能的方法

Oct 31 Javascript

javascript中关于类型判断的一些疑惑小结

Oct 14 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中fwrite与file_put_contents性能测试代码

2013/08/02 PHP

smarty模板引擎中变量及变量修饰器用法实例

2015/01/22 PHP

PHP性能分析工具XHProf安装使用教程

2015/05/13 PHP

php创建桌面快捷方式实现方法

2015/12/31 PHP

yii2带搜索功能的下拉框实例详解

2016/05/12 PHP

基于php判断客户端类型

2016/10/14 PHP

PHP pthreads v3在centos7平台下的安装与配置操作方法

2020/02/21 PHP

JS 自定义带默认值的函数

2011/07/21 Javascript

jquery中dom操作和事件的实例学习仿yahoo邮箱登录框的提示效果

2011/11/30 Javascript

node.js使用nodemailer发送邮件实例

2014/03/10 Javascript

JavaScript 学习笔记之基础中的基础

2015/01/13 Javascript

全面解析JavaScript里的循环方法之forEach，for-in，for-of

2020/04/20 Javascript

关于javascript的一些知识以及循环详解

2016/09/12 Javascript

angularJS模态框$modal实例代码

2017/05/27 Javascript

jquery ajax异步提交表单数据的方法

2017/10/27 jQuery

JavaScript通过mouseover()实现图片变大效果的示例

2017/12/20 Javascript

jQuery Validate插件ajax方式验证输入值的实例

2017/12/21 jQuery

Vue 项目代理设置的优化

2018/04/17 Javascript

jQuery实现html可联动的百分比进度条

2020/03/26 jQuery

vue路由结构可设一层方便动态添加路由操作

2020/08/31 Javascript

javascript代码实现简易计算器

2021/01/25 Javascript

python原始套接字编程示例分享

2014/02/21 Python

Python遍历指定文件及文件夹的方法

2015/05/09 Python

简单实现python爬虫功能

2015/12/31 Python

Python读取一个目录下所有目录和文件的方法

2016/07/15 Python

利用pyinstaller或virtualenv将python程序打包详解

2017/03/22 Python

如何爬取通过ajax加载数据的网站

2019/08/15 Python

亚马逊加拿大网站：Amazon.ca

2020/01/06 全球购物

宿舍违规用电检讨书

2014/02/16 职场文书

一份文言文检讨书

2014/09/13 职场文书

英语四级考试作弊检讨书

2014/09/29 职场文书

综合实践活动报告

2015/02/05 职场文书

十八大观后感

2015/06/12 职场文书

2015秋季开学典礼主持词

2015/07/16 职场文书

团支部书记竞选稿

2015/11/21 职场文书

祝福语集锦：给满月宝宝的祝福语

2019/11/20 职场文书