纯JS代码实现气泡效果
就不给大家多文字说明了。给大家梳理下关键步骤。
关键步骤：
1、引入js文件
<scripttype="text/javascript"src="js/jquery.min.js"></script> <scripttype="text/javascript"src='js/jquery.thoughtBubble.js'></script>
2、在需要使用气泡效果的地方
<divid='mainContainer'class='container'> <imgsrc='ahout.JPG'id="thoughtBubble"alt='whatsup?'/> </div>
3、使用气泡效果
<scripttype="text/javascript">
$(window).ready(function(){
$('#thoughtBubble').thoughtBubble({
text:'baby,Iloveyou',
font:'avenir'
});
});
4、这是jquery.thoughtBubblr.js代码
(function($){
$.fn.thoughtBubble=function(defaults){
varsettings=$.extend({
backgroundColor:'white',
fontColor:'black',
width:'330px',
height:'210px',
fontSize:'15px',
bubbleColor:'white',
speed:125
},defaults),
getBubbleDiv=function(container){
varoffset=container.offset(),
modifiedHeight=offset.top-parseInt(settings.height),
style='"position:absolute;top:'+modifiedHeight+'px;left:'+offset.left+'px;width:'+settings.width+';height:'+settings.height+';"',
bubbleContainer="<divclass='bubble-holder'style="+style+">"+getMainBubble()+getBubbles()+"</div>";
returnbubbleContainer;
},
getMainBubble=function(){
return'<divclass="main-bubble-holder"><divclass="bubblemain-bubble">'+getText()+'</div></div>';
},
getText=function(){
return'<spanstyle="vertical-align:middle;color:'+settings.fontColor+';font-size:'+settings.fontSize+';font-family:'+settings.font+'">'+settings.text+'</span>';
},
getBubbles=function(){
return'<divclass="sm-bubble-holder"><divclass="bubblebubbleLg"></div><divclass="bubblebubbleMd"></div><divclass="bubblebubbleSm"></div></div>';
},
animate=function(){
varbubbles=$(document).find('.bubble'),
reversed=bubbles.get().reverse(),
speed=settings.speed;
$(reversed[0]).stop().animate({opacity:1},speed,function(){
$(reversed[1]).animate({opacity:1},speed,function(){
$(reversed[2]).animate({opacity:1},speed,function(){
$(reversed[3]).animate({opacity:1},speed);
});
});
});
},
unanimate=function(){
varbubbles=$(document).find('.bubble');
bubbles.stop().animate({opacity:0});
},
shiftDiv=function(container){
varbubbleHolder=$(document).find('.bubble-holder'),
previousPosition=container.offset().left;
bubbleHolder.css('left',previousPosition);
};
returnthis.each(function(){
var$this=$(this),
container=getBubbleDiv($this);
$this.on('mouseenter',animate);
$this.on('mouseout',unanimate);
$(window).on('resize',shiftDiv.bind(this,$this));
return$this.parent().prepend(container);
});
};
})(jQuery);
以上给大家分享了js气泡效果的关键步骤，代码简单易懂，就没给写过多的文字说明，大家有疑问欢迎给我留言，小编会及时回复大家的，在此小编也非常感谢大家对毛票票网站的支持！