zoukankan      html  css  js  c++  java
  • 鼠标设置Jquery实现鼠标移上弹出提示框,移出消失

    在写这篇文章之前,xxx已经写过了几篇关于改鼠标设置主题的文章,想要了解的朋友可以去翻一下之前的文章

        思路:

        1.首先要定位实现这类效果的元素 ,本次通过class

        2.如果是动态表现不同的提示内容,需设置title

        3.通过JQ给定位到元素加上  mouseover 和mouseout 事件

        4.再完善下,弹出框跟随鼠标在目标元素上挪动

        5.再把 mouseover 、mouseout 合并成 hover 

        

        每日一道理
    自己把自己说服了,是一种理智的胜利;自己被自己感动了,是一种心灵的升华;自己把自己征服了,是一种人生的成功。
    //页面加载实现
    $(function () {
        var x = 10;
        var y = 20; //设置提示框相对于偏移位置,避免遮挡鼠标
        $(".prompt").hover(function (e) {  //鼠标移上事件
            this.myTitle = this.title; //把title的赋给自定义属性 myTilte ,屏蔽自带提示
            this.title = "";
            var tooltipHtml = "<div id='tooltip'>" + this.myTitle + "</div>"; //创建提示框
            $("body").append(tooltipHtml); //添加到页面中
            $("#tooltip").css({
                "top": (e.pageY + y) + "px",
                "left": (e.pageX + x) + "px"
            }).show("fast"); //设置提示框的坐标,并表现
        }, function () {  //鼠标移出事件
            this.title = this.myTitle;  //重新设置title
            $("#tooltip").remove();  //移除弹出框
        }).mousemove(function (e) {   //跟随鼠标挪动事件
            $("#toolti").css({ "top": (e.pageY + y) + "px",
                "left": (e.pageX + x) + "px"
            });
        });
    });

        

    文章结束给大家分享下程序员的一些笑话语录: 火车
    一个年轻的程序员和一个项目经理登上了一列在山里行驶的火车,他们发现 列车上几乎都坐满了,只有两个在一起的空位,这个空位的对面是一个老奶 奶和一个年轻漂亮的姑娘。两个上前坐了下来。程序员和那个姑娘他们比较 暧昧地相互看对方。这时,火车进入山洞,车厢里一片漆黑。此时,只听见 一个亲嘴的声音,随后就听到一个响亮的巴掌声。很快火车出了山洞,他们 四个人都不说话。
    那个老奶奶在喃喃道, “这个年轻小伙怎么这么无礼, 不过我很高兴我的孙女 扇了一个巴掌”。
    项目经理在想,“没想到这个程序员居然这么大胆,敢去亲那姑娘,只可惜那 姑娘打错了人,居然给打了我。”
    漂亮的姑娘想,“他亲了我真好,希望我的祖母没有打疼他”。
    程序员坐在那里露出了笑容, “生活真好啊。 这一辈子能有几次机会可以在亲 一个美女的同时打项目经理一巴掌啊”

  • 相关阅读:
    Discuz X 2.5 点点(伪静态)
    jq 、xml 省市级联动
    php memcache 初级使用(2)
    关于windows虚拟内存管理的页目录自映射
    SharePoint 2010 网络上的开发经验和资源
    SharePoint 2010 Reporting Services 报表服务器正在内置 NT AUTHORITY\SYSTEM 账户下运行 解决方法
    SharePoint 2010 Reporting Services 报表服务器无法解密用于访问报表服务器数据库中的敏感数据或加密数据的对称密钥 解决方法
    Active Directory Rights Management Services (AD RMS)无法检索证书层次结构。 解决方法
    SharePoint 2010 Reporting Services 报表服务器实例没有正确配置 解决方法
    SharePoint 2010 页面引用 Reporting Services 展现 List 报表
  • 原文地址:https://www.cnblogs.com/xinyuyuanm/p/3087697.html
Copyright © 2011-2022 走看看