利用jQuary實(shí)現(xiàn)文字浮動(dòng)提示效果示例代碼
更新時(shí)間：2013年12月26日 17:38:37 投稿：whsnow
文字浮動(dòng)提示效果想必大家都有見到過吧,下面為大家詳細(xì)介紹下使用jquery是如何做到的,感興趣的朋友可以參考下
復(fù)制代碼 代碼如下:
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script>
/*文字提示*/
/*
（1）鼠標(biāo)移入的時(shí)候，創(chuàng)建一個(gè)div它的內(nèi)容是title屬性的值
（2）規(guī)定位置，設(shè)置css樣式
（3）鼠標(biāo)移出的時(shí)候，移除div
（4）鼠標(biāo)移動(dòng)的時(shí)候，X Y軸的坐標(biāo)要相應(yīng)的變化
*/
$(function(){
var x = 7;
var y = 8;
$("a.tip").hover(function(){
var title = this.title;
var $div = $("<div id='newTip'>"+title+"</div>");
$("body").append($div);
$div.css({"position":"absolute","background":"pink"});
},function(){
$("#newTip").remove();
}).mousemove(function(e){
var $div = $("#newTip").css({"left":(e.pageX+x)+'px',"top":(e.pageY+y)+'px'});
});
})
</script>
</head>
<body>
<a href="#" class="tip" title="這是我的提示">這是我的提示</a>
</body>
</html>
相關(guān)文章
jQuery使用正則表達(dá)式替換dom元素標(biāo)簽用法示例
這篇文章主要介紹了jQuery使用正則表達(dá)式替換dom元素標(biāo)簽的方法,結(jié)合具體實(shí)例形式分析了jQuery正則替換的操作技巧,需要的朋友可以參考下2017-01-01
下面小編就為大家?guī)硪黄钊肜斫鈐Query 事件處理。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
DOM操作和jQuery實(shí)現(xiàn)選項(xiàng)移動(dòng)操作的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄狣OM操作和jQuery實(shí)現(xiàn)選項(xiàng)移動(dòng)操作的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
jquery實(shí)現(xiàn)限制textarea輸入字?jǐn)?shù)的方法
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)限制textarea輸入字?jǐn)?shù)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
jquery+h5實(shí)現(xiàn)九宮格抽獎(jiǎng)特效(前后端代碼)
這篇文章主要為大家詳細(xì)介紹了jquery+h5實(shí)現(xiàn)九宮格抽獎(jiǎng)特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
剛剛寫的一個(gè)jquery的彈出層的插件2008-10-10
jQuery插件FusionCharts繪制2D雙折線圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制2D雙折線圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionCharts結(jié)合xml數(shù)據(jù)載入實(shí)現(xiàn)2D雙折線圖繪制的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-04-04
基于jQuery實(shí)現(xiàn)照片墻自動(dòng)播放特效
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)照片墻自動(dòng)播放特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
基于jquery trigger函數(shù)無法觸發(fā)a標(biāo)簽的兩種解決方法
下面小編就為大家分享一篇基于jquery trigger函數(shù)無法觸發(fā)a標(biāo)簽的兩種解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
逐一介紹Jquery data()、Jquery stop()、jquery delay()函數(shù)(詳)
這篇文章逐一介紹Jquery data()、Jquery stop()、jquery delay()函數(shù)(詳)的相關(guān)資料,需要的朋友可以參考下2015-11-11