利用jQuary實(shí)現(xiàn)文字浮動(dòng)提示效果示例代碼
更新時(shí)間：2013年12月26日 17:38:37 投稿：whsnow
文字浮動(dòng)提示效果想必大家都有見(jiàn)到過(guò)吧,下面為大家詳細(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選擇器中，我們很少會(huì)用到諸如“.”、“#”、“(”、“[”等特殊字符，但是在實(shí)際應(yīng)用中，偶爾也會(huì)遇到表達(dá)式中含有“#”和“.”等特殊字符,那么是如何處理這些個(gè)特殊字符的呢？下面小編給大家介紹下2017-09-09
jquery控制背景音樂(lè)開(kāi)關(guān)與自動(dòng)播放提示音的方法
這篇文章主要介紹了jquery控制背景音樂(lè)開(kāi)關(guān)與自動(dòng)播放提示音的方法,實(shí)例分析了背景音樂(lè)開(kāi)關(guān)的技巧與自動(dòng)播放提示音的常見(jiàn)用法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
jQuery的事件模塊是較復(fù)雜的，前面僅僅提到了對(duì)事件對(duì)象的包裝。即統(tǒng)一了一些兼容性的問(wèn)題。這篇會(huì)綜述下jQuery的整個(gè)事件模塊。2011-06-06
jQuery實(shí)現(xiàn)的背景顏色漸變動(dòng)畫(huà)效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的背景顏色漸變動(dòng)畫(huà)效果,涉及事件響應(yīng)及頁(yè)面元素屬性結(jié)合時(shí)間動(dòng)態(tài)變換的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
jquery ajax post提交數(shù)據(jù)亂碼
今天發(fā)現(xiàn)在使用jquery ajax.post提交數(shù)據(jù)時(shí)會(huì)發(fā)現(xiàn)數(shù)據(jù)在ff正常，但在chrome與ie瀏覽器中post過(guò)去的數(shù)據(jù)全部是亂碼2013-11-11
本文將為大家介紹下jQuery模擬超鏈接點(diǎn)擊效果實(shí)現(xiàn)，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-04-04
jquery根據(jù)屬性和index來(lái)查找屬性值并操作
這篇文章主要介紹了jquery如何根據(jù)屬性和index來(lái)查找屬性值并操作,需要的朋友可以參考下2014-07-07
jquery簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)導(dǎo)航條改變背景圖
鼠標(biāo)經(jīng)過(guò)導(dǎo)航條改變背景圖的效果很是好看，下面為大家介紹下使用jquery是如何實(shí)現(xiàn)的，感興趣的朋友可以參考下2013-12-12
jquery 學(xué)習(xí)之二 屬性(html()與html(val))
取得第一個(gè)匹配元素的html內(nèi)容。這個(gè)函數(shù)不能用于XML文檔。但可以用于XHTML文檔。2010-11-11
jQuery實(shí)現(xiàn)的簡(jiǎn)單拖拽功能示例【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單拖拽功能,涉及jQuery基于事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)拖拽功能的相關(guān)操作技巧,需要的朋友可以參考下2018-08-08