锋利的jquery-实践一(鼠标悬停提示案例)

//这是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 = "
" + this[0].myTitle + "
" $("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>JqueryDemotitle>
    <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>

 

运行效果:

锋利的jquery-实践一(鼠标悬停提示案例)_第1张图片

当然还可以把DIV的内容换成图片,就形成了图片的悬浮效果

努力学习.....

 

你可能感兴趣的:(锋利的jquery-实践一(鼠标悬停提示案例))