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