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 removeChild 障眼法 可能出现的错误
Oct 06 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
JavaScript实现栈结构详细过程
Dec 06 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
php5中类的学习
2008/03/28 PHP
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
PHP实现多条件查询实例代码
2010/07/17 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
Python中的魔法方法深入理解
2014/07/09 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
歌颂祖国的演讲稿
2014/05/04 职场文书
班级文化建设标语
2014/06/23 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
先进工作者个人总结
2015/02/15 职场文书
培训通知
2015/04/17 职场文书
发票退票证明
2015/06/24 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书