//JS MOMO.js에 있는 코드입니다
JQUERY 플러그인을 캡슐화하는 방법을 방금 배웠기 때문에 실제로는 mouseover, mouseout, 첫 페이지에서 직접 mousemove 이벤트를 수행하세요.
(function ($) {
$.fn.extend({
"titleOver": function (e) {
this[0].myTitle = this[0].title;
this[0].title = "";
//创建div元素
var tooltip = "<div id='tooltip' style='border:1px solid #000000;width:auto;position:absolute;'>" + this[0].myTitle + "</div>"
$("body").append(tooltip);
$("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show('fast');
}, "titleOut": function () {
this[0].title = this[0].myTitle;
$("#tooltip").remove();
}, "titleMove": function (e) {
$("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" });
}
});
//默认鼠标坐标
var x = 10;
var y = 20;
})(window.jQuery);첫 페이지:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JqueryDemo</title>
<script type="text/javascript" src="script/jquery-1.8.3.js"></script>
<script type="text/javascript" src="script/MOMO.js"></script>
<script type="text/javascript">
$(function () {
$("a").mouseover(function (e) {
$(this).titleOver(e);
}).mouseout(function () {
$(this).titleOut();
}).mousemove(function (e) {
$(this).titleMove(e);
});
});
</script>
</head>
<body>
<a href="#" title="这是一个链接">这是一个链接^_^！</a>
</body>
</html>실행 효과:
물론, DIV의 내용을 그림으로 바꿔서 그림이 떠다니는 효과를 낼 수도 있습니다.
열심히 공부하세요...
위 내용이 이 글의 전체 내용입니다. 이 기사의 내용이 모든 사람의 공부나 업무에 도움이 되기를 바랍니다. PHP 중국어 웹사이트도 지원하고 싶습니다!
jquery 기반 마우스 호버 프롬프트 사례에 대한 더 많은 글은 PHP 중국어 홈페이지를 주목해주세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
