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程序设计有所帮助。

Javascript 相关文章推荐
js技巧--转义符&quot;\&quot;的妙用
Jan 09 Javascript
jquery tools系列 expose 学习
Sep 06 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 Javascript
实例分析javascript中的异步
Jun 02 Javascript
WebPack工具运行原理及入门教程
Dec 02 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获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
如何基于js判断浏览器版本
2020/02/20 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
Python实现发送email的几种常用方法
2014/08/18 Python
python自定义类并使用的方法
2015/05/07 Python
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
python音频处理的示例详解
2020/12/23 Python
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
综合测评自我鉴定
2013/10/08 职场文书
建筑自我鉴定
2013/10/19 职场文书
升职自荐书范文
2013/11/28 职场文书
工商管理专业职业生涯规划
2014/01/01 职场文书
生日寄语大全
2014/04/08 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
2016七一建党节慰问信
2015/11/30 职场文书