在逛Z-Blog个人博客、Emlog个人博客的时候，发现一款非常好看的网页特效，鼠标悬停气泡提示效果，emmm...挺好看的，顺手我就扒下来了
。
利用CSS+JS对鼠标移到链接处，当含有title标签时，就出现提示信息加以美化的特效，在个人博客颇受站长们喜爱，而且，代码也是非常的简洁，下面全民博客将代码分享给大家。
还是那句话，废话不多说，直接上代码，鼠标悬停气泡提示效果，特效代码如下；
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<title>全民博客</title>
</head>
<style>
.tooltip{font-size:12px;font-family:arial,sans-serif;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 #8AC7E4;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:#000}
.tipsy-inner{background-color:#000;color:#fff;max-width:200px;padding:5px 8px 4px 8px;text-align:center;border-radius:3px}
</style>
<script src="http://nidecms.com/ueditor/jquery.min.js"></script>
<body>
<!--{网页代码}-->
<a href="#" title="没错，写代码就是这么简单">写代码就是这么简单</a>
<!--{网页代码}-->
</body>
</html>
<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 - 40) + "px"
});
});
});
}
};
$(function() {
sweetTitles.init();
});
});
</script>一个好看的网站，离不开网页特效，一个能提升用户体验的网站，肯定是要代码简洁，这么简洁的代码，这么好看的特效，你是不是，也想给你的网站整一个哈，不用谢，喜欢这款特效的赶紧拿走吧。
本文结束
评论专区
上一篇
发表评论
评论列表（无评论）