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 相关文章推荐
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 Javascript
vue2中使用less简易教程
Mar 27 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 Javascript
vue2.x 对象劫持的原理实现
Apr 19 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下实现伪 url 的超简单方法[转]
2007/09/24 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
php字符串过滤与替换小结
2015/01/26 PHP
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
Python pickle模块用法实例
2015/04/14 Python
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
解决Mac下使用python的坑
2019/08/13 Python
Python文件操作函数用法实例详解
2019/12/24 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
大二学期个人自我评价
2014/01/13 职场文书
公司募捐倡议书
2014/05/14 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
详解MySQL 联合查询优化机制
2021/05/10 MySQL
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python