简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

基于JQuery的一个简单的鼠标跟随提示效果_jquery

WBOY
發布： 2016-05-16 18:19:20
原創
1404 人瀏覽過

1.效果如图

　　

2.实现思路

　　1 鼠标移入标题（这里是标签）

　　　　创建一个div，div的内容为鼠标位置的文本

　　　　将创建好的div加到文档中

　　　　为提示层设置位置

　　2 鼠标移出标题

　　　　移除div

　　3 当鼠标在标题内移动时

　　　　同样添加div效果

3.JQuery实现代码

复制代码 代码如下:









";
$("body").append(toolTip);
$("#tooltip").css({
"top" :e.pageY + "px",
"left" :e.pageX + "px"
});
$("#tb a").mouseout(function(){
$("#tooltip").remove();
});
$("#tb a").mousemove(function(e){
$("#tooltip").css({
"top" :(e.pageY+5) + "px",
"left" :(e.pageX+2) + "px"
});
});
//alert("Y:" + e.pageY + "X:" + e.pageX);
});
});






代码很简单主要是用到了JQuery的三个事件mouseover,mouseout,mousemove.
相關標籤：
提示 滑鼠跟隨
來源：php.cn
上一篇：窗体滚动条出现在左侧的实例代码_文字特效 下一篇：链接图片无缝(无间断)向左平滑滚动Js版代码_图象特效
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
標題：在白色以外的任何顏色的背景上實現白色文字可見性 當背景顏色為黑色時，使用mix-blend-mode:Difference將文字顏色變更為白色效果很好。將滑鼠移至文字處即可查看效果：constblackBox=document....
來自於 2023-11-10 16:59:01
0
1
311
Div 捕捉到滑鼠滾動 我目前有一個以下形式的頁面<divid="content"><divid="content-page-1"><...
來自於 2023-11-01 18:57:05
0
2
268
取得重定向目標的PHP cURL方法，而不進行跟隨重定向 curl_getinfo函數傳回大量有關HTTP請求結果的元資料。但是，由於某種原因，它不包含我目前想要的訊息，如果請求返回HTTP重定向程式碼，該訊息就是目標URL。我沒有使用C...
來自於 2023-10-25 08:56:01
0
1
205
取得集合中隨機文件的Firestore方法 對於我的應用程式來說，能夠從Firebase的集合中隨機選擇多個文件至關重要。由於Firebase中沒有內建的本機函數（據我所知）來實現執行此操作的查詢，因此我的第一個想法是使用查...
來自於 2023-10-19 11:39:22
0
2
301
如何在JavaScript中產生隨機的字母數字字串？ 在JavaScript中產生隨機字母數字（大寫、小寫和數字）字串以用作可能唯一識別碼的最短方法（在合理範圍內）是什麼？
來自於 2023-10-12 23:03:12
0
2
301
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！