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

JS获取scrollHeight问题想到的标准问题

May 27 Javascript

简单实例处理url特殊符号&处理(2种方法)

Apr 02 Javascript

jQuery中校验时间格式的正则表达式小结

Sep 22 Javascript

JS高级调试技巧：捕获和分析 JavaScript Error详解

Mar 16 Javascript

一个简单的Node.js异步操作管理器分享

Apr 29 Javascript

javascript制作的cookie封装及使用指南

Jan 02 Javascript

JSON字符串和对象相互转换实例分析

Jun 16 Javascript

微信小程序加载 app-service.js 错误解决方法

Oct 12 Javascript

Angularjs根据json文件动态生成路由状态的实现方法

Apr 17 Javascript

AngularJs实现聊天列表实时刷新功能

Jun 15 Javascript

关于使用js算总价的问题

Jun 23 Javascript

浅谈Vue中render中的h箭头函数

Nov 07 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新手上路（四）

2006/10/09 PHP

第十二节--类的自动加载

2006/11/16 PHP

destoon二次开发模板及调用语法汇总

2014/06/21 PHP

解决php表单重复提交实现方法

2015/09/29 PHP

PHP文件及文件夹操作之创建、删除、移动、复制

2016/07/13 PHP

juqery 学习之三选择器子元素与表单

2010/11/25 Javascript

Jquery命名冲突解决的五种方案分享

2012/03/16 Javascript

xml转json的js代码

2012/08/28 Javascript

JS 如何获取radio选中后的值及不选择取radio的值

2013/10/28 Javascript

Javascript实现禁止输入中文或英文的例子

2014/12/09 Javascript

jQuery实现的登录浮动框效果代码

2015/09/26 Javascript

jQuery中选择器的基础使用教程

2016/05/23 Javascript

获取input标签的所有属性的方法

2016/06/28 Javascript

正则表达式替换html元素属性的方法

2016/11/26 Javascript

nodejs获取微信小程序带参数二维码实现代码

2017/04/12 NodeJs

基于dataset的使用和图片延时加载的实现方法

2017/12/11 Javascript

实战node静态文件服务器的示例代码

2018/03/08 Javascript

vue中多路由表头吸顶实现的几种布局方式

2019/04/12 Javascript

ES6中异步对象Promise用法详解

2019/07/31 Javascript

微信小程序页面间传递数组对象方法解析

2019/11/06 Javascript

uniapp 仿微信的右边下拉选择弹出框的实现代码

2020/07/12 Javascript

基于vue 动态菜单刷新空白问题的解决

2020/08/06 Javascript

vue mvvm数据响应实现

2020/11/11 Javascript

Python抽象类的新写法

2015/06/18 Python

Django分页查询并返回jsons数据(中文乱码解决方法)

2018/08/02 Python

Python中字符串String的基本内置函数与过滤字符模块函数的基本用法

2019/05/27 Python

简单了解django orm中介模型

2019/07/30 Python

浅谈Django2.0 加xadmin踩的坑

2019/11/15 Python

django 实现简单的插入视频

2020/04/07 Python

基于python实现获取网页图片过程解析

2020/05/11 Python

Python如何脚本过滤文件中的注释

2020/05/27 Python

REISS美国官网：伦敦最受欢迎的时尚品牌

2019/08/16 全球购物

主键(Primary Key)约束和唯一性(UNIQUE)约束的区别

2013/05/29 面试题

建筑专业毕业生推荐信

2013/11/21 职场文书

工厂厂长的职责

2013/12/12 职场文书

应届毕业生如何写求职信

2014/02/16 职场文书