殷德瑶博客
喜欢的歌,静静地听!喜欢的人,远远地看!

tooltip(title美化)教程——jquery的特效

殷德瑶 2016-5-29 emlog教程 评论 4059 次

要感谢大神独狼提供的一串代码,还有清风的css

一直在寻找美化title的方法,百度有许多,不过对我们这些小白来说很难。

首先复制下面代码到网站底部:

<script>jQuery(document).ready(function($) {
    var sweetTitles = {
        x: 10,
        y: 20,
        tipElements: "a,span,img,div ",
        noTitle: false,
        init: function() {
            var noTitle = this.noTitle;
            $(this.tipElements).each(function() {
                $(this).mouseover(function(e) {
                    if (noTitle) {
                        isTitle = true;
                    } else {
                        isTitle = $.trim(this.title) != '';
                    }
                    if (isTitle) {
                        this.myTitle = this.title;
                        this.title = "";
                        var tooltip = "<div class='tooltip'><div class='tipsy-arrow tipsy-arrow-n'></div><div class='tipsy-inner'>" + this.myTitle + "</div></div>";
                        $('body').append(tooltip);
                        $('.tooltip').css({
                            "top": (e.pageY + 20) + "px",
                            "left": (e.pageX - 20) + "px"
                        }).show('fast');
                    }
                }).mouseout(function() {
                    if (this.myTitle != null) {
                        this.title = this.myTitle;
                        $('.tooltip').remove();
                    }
                }).mousemove(function(e) {
                    $('.tooltip').css({
                        "top": (e.pageY + 20) + "px",
                        "left": (e.pageX - 20) + "px"
                    });
                });
            });
        }
    };
    $(function() {
        sweetTitles.init();
    });
});</script>

然后添加网站css即可,样式自己修改即可,如下:

.tooltip {
	font-size: 12px;
	font-family: \5b8b\4f53;
	line-height: 1.5;
	position: absolute;
	padding: 5px;
	z-index: 100003;
	opacity: .8
}

.tipsy-arrow {
	position: absolute;
	width: 0;
	height: 0;
	line-height: 0;
	border: 6px dashed #FFA500;
	top: 0;
	left: 20%;
	margin-left: -5px;
	border-bottom-style: solid;
	border-top: 0;
	border-left-color: transparent;
	border-right-color: transparent
}

.tipsy-arrow-n {
	border-bottom-color: #FFA500;
}

.tipsy-inner {
	background-color: #FFA500;
	color: #fff;
	max-width: 200px;
	padding: 5px 8px 4px 8px;
	text-align: center;
	border-radius: 3px
}

发表评论


粤ICP备15078261号 Powered by 黑暗之夜
Theme by 殷德瑶博客