浏览器自带的alt和title提示太丑了,所以我们需要美化一下,百度有许多,不过对我们这些小白来说很难。
第一步
放以下js到公用js里面
var sweetTitles = {
x: 10,
y: 20,
tipElements: "a,span,img,div ",
noTitle: false,
init: function() {
var b = this.noTitle;
$(this.tipElements).each(function() {
$(this).mouseover(function(e) {
if (b) {
isTitle = true
} else {
isTitle = $.trim(this.title) != ''
}
if (isTitle) {
this.myTitle = this.title;
this.title = "";
var a = "<div class='tooltip'><div class='tipsy-arrow tipsy-arrow-n'></div><div class='tipsy-inner'>" + this.myTitle + "</div></div>";
$('body').append(a);
$('.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()
});
第二步css也是放到公用css文件里面
请登录后发表评论
注册
请登录后查看评论内容