jQuery泡泡工具提示动画代码

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

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

以下是 jQuery泡泡工具提示动画代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
<title>jQuery泡泡工具提示动画</title>
<script src="js/jquery.min.js" ></script>
<script src="js/FlstBubble-min.js"></script>
<link rel="stylesheet" href="css/blue-theme.css" type="text/css">
<style type="text/css">

<!--
  body {text-align: center;}
  .wrapper {text-align:right; width: 800px;margin:0 auto;text-align: center;}
  .wrapper ul li  {
    float: left;
    width: 150px;
    height: 150px;
  
    border: 1px solid #ccc;
    margin:10px;
    list-style-type: none;
    
  }
  .flstbubble ul {
                overflow:hidden;
  }
//-->
</style>
</head>
<body>
<div class="wrapper">
      <ul class="flstbubble">
           <li title="Click the bubble to hide" class="s0"> Item Nr 1</li>
           <li title="Item nr 2 custom text"> Item Nr 2</li>
           <li title="Just another tooltip" > Item Nr 4</li>
           <li title="this is a &lt;b&gt;jQuery Plugin &lt;/b&gt;" class="s1"> Item Nr 3</li>
           <li title="very easy to implement"> Item Nr 5</li>
           <li title="available on codecanyon.net"> Item Nr 6</li>
           <li title="Add Custom function "> Item Nr 7</li>
           <li title="Set the animation duration"> Item Nr 8</li>
           <li title="Very easy to customize the color" class="s2"> Item Nr 9</li>
           <li title="Multiple instance of this jQuery plugin "> Item Nr 10</li>
           <li title="You can show and the wizard and let the user mouseover"> Item Nr 11</li>
           <li title="If you need more customization just edit the css file"> Item Nr 12</li>
           <li title="You can add a custom function for when the wizard has finished" class="s3"> Item Nr 7</li>
           <li title="If javascript is not enabled it will show the default title" > Item Nr 8</li>
           <li title="Fast Support "> Item Nr 9</li>
           <li title="After this wizzard has stoped the blue bubble will show up when you mouseover a tag"  class="s4" > Item Nr 10</li>
           <li title="Lorem ipsum"> Item Nr 11</li>
           <li title="Lorem ipsum"> Item Nr 12</li>
           <li title="Lorem ipsum"> Item Nr 7</li>
           <li title="Lorem ipsum"> Item Nr 8</li>
           <li title="Lorem ipsum"> Item Nr 9</li>
           <li title="Lorem ipsum"> Item Nr 10</li>
           <li title="Lorem ipsum"> Item Nr 11</li>
           <li title="Lorem ipsum"> Item Nr 12</li>                      
      </ul>
      <br clear="all">

</div>
 <script>
 $(document).ready(function(){
   function startBlue(){
    $('.flstbubble li, .flstbubble2').flstBubble({id:'newId',duration:100});                                  
   }
 $('.flstbubble').flstBubble({
                          
                                  wizard: new Array('.s0','.s1','.s3','.s4'),
                                  showOnlyOnWizard: true ,
                                   autoscroll:true,
                                   startWizardFrom:0,
                                   theme: { background:'red',color:'#fff' },
                                   onFinishWizard:startBlue
                                  }); 
});                                     
                                                                
 </script>
</body>
</html>

JS代码(FlstBubble-min.js):

(function(e){
	e.fn.flstBubble=function(t){
	function u(){
	a();
	e("#"+r.id).show();
	e("#"+i).fadeIn({
	duration:r.duration,complete:function(){
	e("#"+s).fadeIn({
	duration:r.duration,complete:function(){
	e("#"+r.id+" .flst-msg").fadeIn(r.duration)}
}
)}
}
)}
function a(){
	e("#"+r.id+" #"+i).hide();
	e("#"+r.id+" #"+s).hide();
	e("#"+r.id+" .flst-msg").hide();
	e("#"+r.id+"").hide()}
function f(){
	if(r.wizard.length>0){
	var t=r.wizard[r.startWizardFrom];
	l(e(t).attr("title"),t);
	e(t).removeAttr("title");
	r.startWizardFrom++;
	if(r.startWizardFrom==r.wizard.length){
	r.startWizardFrom=-1}
}
}
function l(t,n){
	var o=e(document).width();
	var a=e(document).outerHeight();
	e("#"+r.id+" .flst-msg").html(t);
	var f=e(n).offset();
	u();
	e("#"+r.id+"").css({
	left:f.left,top:f.top-c(e(n).outerHeight())}
);
	if(f.top-c(e(n).outerHeight())<0&&f.left+h(e(n).outerWidth())<o){
	e("#"+r.id+"").css("top",f.top+e(n).outerHeight());
	e("#"+r.id+" .flst-msg").css({
	top:45,left:20}
);
	e("#"+i).css({
	top:0,left:0}
);
	e("#"+s).css({
	top:15,left:10}
)}
else if(f.top+c(e(n).outerHeight())>a&&f.left+h(e(n).outerWidth())>o){
	var l=h(0);
	e("#"+r.id).css({
	left:f.left-l,top:f.top-c(0)}
);
	e("#"+r.id+" .flst-msg").css({
	top:0,left:-15}
);
	e("#"+i).css({
	top:25+e("#"+r.id+" .flst-msg").outerHeight(),left:l}
);
	e("#"+s).css({
	top:0+e("#"+r.id+" .flst-msg").outerHeight(),left:l-25}
)}
else if(f.left+h(e(n).outerWidth())>=o){
	e("#"+r.id+"").css({
	top:f.top+e(n).outerHeight(),left:f.left-h(0)}
);
	e("#"+r.id+" .flst-msg").css({
	top:50,left:10}
);
	e("#"+i).css({
	top:0,left:h(0)}
);
	e("#"+s).css({
	top:20,left:h(0)-10}
)}
else{
	e("#"+r.id).css({
	left:f.left,top:f.top-c(0)}
);
	e("#"+r.id+" .flst-msg").css({
	top:0,left:20}
);
	e("#"+i).css({
	top:25+e("#"+r.id+" .flst-msg").outerHeight(),left:0}
);
	e("#"+s).css({
	top:0+e("#"+r.id+" .flst-msg").outerHeight(),left:10}
)}
if(r.wizard&&r.autoscroll){
	var p=e(n).offset().top;
	if(e(n).offset().top>e("#"+r.id).offset().top){
	p=e("#"+r.id).offset().top}
e("html,body").animate({
	scrollTop:p}
,1e3)}
}
function c(t){
	return e("#"+r.id+" .flst-msg").outerHeight()+e("#"+r.id+" #"+i).outerHeight()+e("#"+r.id+" #"+s).outerHeight()+t}
function h(t){
	return e("#"+r.id+" .flst-msg").outerWidth()}
var n=new Array;
	var r=e.extend({
	id:"flstBubble-strct",duration:200,wizard:false,autoscroll:false,startWizardFrom:0,showOnlyOnWizard:false,useWizard:true,onFinishWizard:false,theme:false}
,t);
	var i=r.id+"b1";
	var s=r.id+"b2";
	if(jQuery.isPlainObject(r.theme)){
	e(document).ready(function(){
	e("#"+r.id+" .flst-msg,#"+i+",#"+s).css({
	background:r.theme.background,color:r.theme.color}
)}
)}
if(e("body #"+r.id).length==0){
	var o='<div id="'+r.id+'" class="flstBubble-strct">';
	o+='<div class="flst-msg">no text</div>';
	o+='<div class="bbl1" id="'+i+'"> </div>';
	o+='<div class="bbl2" id="'+s+'"> </div>';
	o+="</div>";
	e("body").append(o)}
a();
	if(r.useWizard){
	f();
	e("#"+r.id+" .flst-msg").bind("click",function(e){
	if(r.startWizardFrom==-1){
	if(r.onFinishWizard)r.onFinishWizard();
	a()}
else{
	f()}
}
)}
if(!r.showOnlyOnWizard){
	this.each(function(t){
	e(this).bind("mouseover",{
	title:e(this).attr("title")}
,function(e){
	l(e.data.title,this)}
);
	e(this).bind("mouseout",{
	title:e(this).attr("title")}
,function(e){
	a()}
);
	e(this).removeAttr("title")}
)}
return this}
}
)(jQuery)

CSS代码(blue-theme.css):

.flstBubble-strct{position:absolute;display:none;height:auto;}
.flstBubble-strct .flst-msg{width:200px;text-align:center;cursor:pointer;}
.bbl1,.bbl2,.flstBubble-strct .flst-msg{-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;position:absolute;}
.flstBubble-strct .flst-msg,.bbl1,.bbl2{padding:10px 15px;border:5px solid white;background:#00baff;color:#eaf9ff;-webkit-box-shadow:0px 0px 5px rgba(50,50,50,0.75);-moz-box-shadow:0px 0px 5px rgba(50,50,50,0.75);box-shadow:0px 0px 5px rgba(50,50,50,0.75);}
.bbl1 img{width:5px;height:5px;}
.bbl1,.bbl2{width:10px;height:10px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:0;}
.bbl1{top:90px;border:2px solid white;}
.bbl2{width:20px;height:20px;top:55px;border:3px solid white;}

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