jQuery提示tips特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery提示tips特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery提示tips特效代码</title>
<script src="js/jquery-1.8.3.min.js"></script>
<link href="css/zzsc.css" rel="stylesheet" type="text/css">
</head>
<body>
<center>
<a href="###" id="ahover" tooltips="这里是hover的tips">鼠标滑过自动显示</a>
<a href="###" id="aclick" tooltips="<img src='img/zzsc.jpg'>">点击显示提示信息</a>
</center>
<script src="js/zzsc.js"></script>
</body>
</html>

JS代码(zzsc.js):

$.fn.extend({
	hoverTips:function (){
	var self = $(this);
	var sw = self.get(0).switch;
	if( !sw ){
	sw = true;
	var content = self.attr("tooltips");
	var htmlDom = $("<div class='tooltips'>").addClass("yellow").html("<p class='content'></p>"+ "<p class='triangle-front'></p>"+ "<p class='triangle-back'></p>");
	htmlDom.find("p.content").html( content );
}
self.on("mouseover",function(){
	$("body").append( htmlDom );
	var left = self.offset().left - htmlDom.outerWidth()/2 + self.outerWidth()/2;
	var top = self.offset().top - htmlDom.outerHeight() - parseInt(htmlDom.find(".triangle-front").css("border-width"));
	htmlDom.css({
	"left":left,"top":top - 10,"display":"block"}
);
	htmlDom.stop().animate({
	"top":top,"opacity":1}
,300);
}
);
	self.on("mouseout",function(){
	var top = parseInt(htmlDom.css("top"));
	htmlDom.stop().animate({
	"top":top - 10,"opacity":0}
,300,function(){
	htmlDom.remove();
	sw = false;
}
);
}
);
}
,clickTips:function (){
	var self = $(this);
	var sw = self.get(0).switch;
	if( !sw ){
	sw = true;
	var content = self.attr("tooltips");
	var htmlDom = $("<div class='tooltips'>").addClass("yellow").html("<p class='content'></p>"+ "<p class='triangle-front'></p>"+ "<p class='triangle-back'></p>");
	htmlDom.find("p.content").html( content );
}
self.on("click",function(){
	$("body").append( htmlDom );
	var left = self.offset().left - htmlDom.outerWidth()/2 + self.outerWidth()/2;
	var top = self.offset().top - htmlDom.outerHeight() - parseInt(htmlDom.find(".triangle-front").css("border-width"));
	htmlDom.css({
	"left":left,"top":top - 10,"display":"block"}
);
	htmlDom.stop().animate({
	"top":top,"opacity":1}
,300,function(){
	setTimeout(function(){
	htmlDom.stop().animate({
	"top":top - 10,"opacity":0}
,300,function(){
	htmlDom.remove();
	sw = false;
}
)}
,2000)}
);
}
)}
}
);
	$("#ahover").hoverTips();
	$("#aclick").clickTips();

CSS代码(zzsc.css):

*{margin:0;padding:0;}
body{padding:200px;font-size:12px;background-color:#f0f0f0;}
.tooltips{border-width:1px;border-style:solid;position:absolute;display:none;border-radius:3px;opacity:0;filter:alpha( opacity = 0);z-index:999;}
.tooltips p.content{padding:5px;}
.tooltips .triangle-front,.tooltips .triangle-back{width:0;height:0;overflow:hidden;border-width:8px;border-style:solid;position:absolute;border-color:transparent;top:100%;left:50%;margin-left:-8px;}
.tooltips .triangle-back{margin-top:-1px;}
.yellow{border-color:#c7c08d;background-color:#fffac3;}
.yellow .triangle-front{border-top-color:#c7c08d;}
.yellow .triangle-back{border-top-color:#fffac3;}
a{padding:5px;margin-right:20px;border:1px solid #cc00dd;}

附件:下载该文件资源,减少时间成本(增值服务)