杨小杰Blog(Youngxj)提供免费教程下载和网站搭建技术教程,主要分享和发布网站源码,致力创造一个高质量网络资源教程的分享平台

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

Young小杰2018-1-30 12:24 网站搭建(2)3709查询中……小标签: 源码分享 原创

浏览器自带的alt和title提示太丑了,所以我们需要美化一下,百度有许多,不过对我们这些小白来说很难。

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


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即可,样式自己修改即可,如下:
.tooltip{font-size:12px;position:absolute;padding:5px;z-index:100000;opacity:.8;font-family:Microsoft Yahei}.tipsy-arrow{position:absolute;width:0;height:0;line-height:0;border:6px dashed #000;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:#6F8EC5}.tipsy-inner{background-color:#6F8EC5;color:#FFF;max-width:200px;padding:5px 8px 4px 8px;text-align:center;border-radius:3px}
我这里用的蓝叶大佬的css,他的样式清新简洁。


这个功能需要引入jquery才能实现。

QQ截图20180130123054.jpg

本文最后更新于2018-1-30,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

发表评论:

评论列表:

  • 吾爱搜wuais Lv 1

    对方不想跟你说话并向你丢了一朵小黄花回复了(献花)
    你的文章写的太好啦,赞一个回复了[真棒]
    打卡成功,现在时间:16点17分记得每天坚持打卡哦! 生活处处有压力,白天有,干劲十足,晚上有,睡眠不足;忙时有,动力十足,闲时有,轻松不足。要正视压力,轻松面对,下午好!

  • SummuL Lv 1

    随便逛逛

  • 手机扫描二维码
    阅读体验更佳