IT技术宅

js 重写美化title tips提示 更加美观

//标题提示效果处
var sweetTitles = {
    x: 10,
    y: 20,
    tipElements: "a",
    init: function () {
        $(this.tipElements).unbind("mouseover mouseout mousemove"); //移除之前绑定的时间防止冲突
        $('#tooltip').remove(); //pjax后防止提示未消失
        $(this.tipElements).mouseover(function (e) {
            this.myTitle = this.title;
            this.myHref = this.href;
            this.myHref = (this.myHref.length > 200 ? this.myHref.toString().substring(0, 200) + "..." : this.myHref);
            this.title = "";
            var tooltip = "";
            if (this.myTitle == "") {
                tooltip = "";
            }
            else {
                tooltip = "<div id='tooltip'><p>" + this.myTitle + "</p></div>";
                $('body').append(tooltip);
                $('#tooltip')
                    .css({
                        "opacity": "0.9",
                        "top": (e.pageY + 20) + "px",
                        "left": (e.pageX + 10) + "px"
                    }).show('fast');
            }

        }).mouseout(function () {
            if (this.myTitle != "") {
                this.title = this.myTitle;
                $('#tooltip').remove();
            }
        }).mousemove(function (e) {
            if (this.myTitle != "") {
                $('#tooltip')
                    .css({
                        "top": (e.pageY + 20) + "px",
                        "left": (e.pageX + 10) + "px"
                    });
            }
        });
    }
};
$(function () {
    sweetTitles.init(); //初始化
});

sweetTitles.init(); //pjax回调

• 版权申明：此文如未标注转载均为本站原创，自由转载请表明出处《IT技术宅》。
• 本文网址：https://www.ilt.me/dmfx/113.html
• 上篇文章：IDEA更改maven下载源为阿里云 解决jar下载慢问题
• 下篇文章：数据结构 ArrayList原理及实现学习总结
• css Web前端 HTML5 js javascript