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 相关文章推荐
JavaScript DOM 添加事件
Feb 14 Javascript
一个javascript图片阅览组件
Nov 09 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 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实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
使用URL传输SESSION信息
2015/07/14 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python中random模块用法实例分析
2015/05/19 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
python导入模块交叉引用的方法
2019/01/19 Python
Python for i in range ()用法详解
2020/09/18 Python
python多进程使用函数封装实例
2020/05/02 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
中学教师暑期培训方案
2014/08/27 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
幼儿园辞职书
2015/02/26 职场文书
新郎接新娘保证书
2015/05/08 职场文书
杨善洲观后感
2015/06/04 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python