jQuery實(shí)現(xiàn)行文字鏈接提示效果的方法
更新時(shí)間：2015年03月10日 10:24:58 作者：hcqenjoy
這篇文章主要介紹了jQuery實(shí)現(xiàn)行文字鏈接提示效果的方法,實(shí)例分析了jQuery操作文字提示效果的方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)行文字鏈接提示效果的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<!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>好吧，現(xiàn)在流行HTML5，我就給它標(biāo)題加上個(gè)HTML5吧</li>
<li>Raphael js庫(kù)是在webrebuild交流會(huì)上聽(tīng)到的</li>
<li>我們來(lái)簡(jiǎn)單了解一下上文中提到的css appearance</li>
</ul>
</div>
</body>
</html>
<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>好吧，現(xiàn)在流行HTML5，我就給它標(biāo)題加上個(gè)HTML5吧</li>
<li>Raphael js庫(kù)是在webrebuild交流會(huì)上聽(tīng)到的</li>
<li>我們來(lái)簡(jiǎn)單了解一下上文中提到的css appearance</li>
</ul>
</div>
</body>
</html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JQuery實(shí)現(xiàn)超鏈接鼠標(biāo)提示效果的方法
- jquery實(shí)現(xiàn)網(wǎng)站超鏈接和圖片提示效果
- jQuery簡(jiǎn)單實(shí)現(xiàn)title提示效果示例
- jQuery文字提示與圖片提示效果實(shí)現(xiàn)方法
- jquery實(shí)現(xiàn)簡(jiǎn)單文字提示效果
- jQuery實(shí)現(xiàn)仿QQ空間裝扮預(yù)覽圖片的鼠標(biāo)提示效果代碼
- jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)后動(dòng)態(tài)圖片提示效果實(shí)例
- jquery刪除數(shù)據(jù)記錄時(shí)的彈出提示效果
- jQuery表單獲取和失去焦點(diǎn)輸入框提示效果的實(shí)例代碼
- jQuery實(shí)現(xiàn)的超鏈接提示效果示例【附demo源碼下載】
相關(guān)文章
jQuery輕松實(shí)現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇jQuery輕松實(shí)現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2016-05-05
詳解jQuery插件開(kāi)發(fā)中的extend方法
這篇文章主要介紹了jQuery插件開(kāi)發(fā)中的extend方法，有需要的朋友可以參考一下2013-11-11
這篇文章主要為大家詳細(xì)介紹了jquery拖動(dòng)改變div大小的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)淘寶商品圖片局部放大，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
jQuery快速上手：寫(xiě)jQuery與直接寫(xiě)JS的區(qū)別詳細(xì)解析
jQuery代碼具體的寫(xiě)法和原生的Javascript寫(xiě)法在執(zhí)行常見(jiàn)操作時(shí)的區(qū)別如下所示。需要的朋友可以過(guò)來(lái)參考下2013-08-08
基于Jquery的動(dòng)態(tài)添加控件并取值的實(shí)現(xiàn)代碼
基于Jquery的動(dòng)態(tài)添加控件并取值的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-09-09
jQuery 是一個(gè)非常優(yōu)秀的 JavaScript 框架，在現(xiàn)在的 Web 開(kāi)發(fā)項(xiàng)目中扮演著重要角色。jQuery 使用簡(jiǎn)單靈活，同時(shí)還有許多成熟的插件可供選擇，它可以幫助你在項(xiàng)目中加入一些非常好的效果，讓網(wǎng)站有更好的可用性和用戶(hù)體驗(yàn)2011-12-12
這篇文章主要為大家詳細(xì)介紹了layui表格效果的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
jQuery對(duì)象數(shù)據(jù)緩存Cache原理及jQuery.data方法區(qū)別介紹
jQuery.data(..)來(lái)實(shí)現(xiàn)數(shù)據(jù)緩存，但有兩個(gè)用戶(hù)經(jīng)常使用的data([key],[value])和jQuery.data(element,[key],[value])，接下來(lái)為大家介紹下他們的區(qū)別，感興趣的朋友可以參考下哈2013-04-04
jquery自定義插件開(kāi)發(fā)之window的實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了jquery自定義插件開(kāi)發(fā)之window的實(shí)現(xiàn)過(guò)程的相關(guān)資料,需要的朋友可以參考下2016-05-05