在逛Z-Blog个人博客、Emlog个人博客的时候，发现一款非常好看的网页特效，鼠标悬停气泡提示效果，emmm...挺好看的，顺手我就扒下来了
。
利用CSS+JS对鼠标移到链接处，当含有title标签时，就出现提示信息加以美化的特效，在个人博客颇受站长们喜爱，而且，代码也是非常的简洁，下面全民博客将代码分享给大家。
还是那句话，废话不多说，直接上代码，鼠标悬停气泡提示效果，特效代码如下；
HTML
- <!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>
一个好看的网站，离不开网页特效，一个能提升用户体验的网站，肯定是要代码简洁，这么简洁的代码，这么好看的特效，你是不是，也想给你的网站整一个哈，不用谢，喜欢这款特效的赶紧拿走吧。
本文结束
评论专区
上一篇
发表评论
评论列表（无评论）