纯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气泡效果的关键步骤,代码简单易懂,就没给写过多的文字说明,大家有疑问欢迎给我留言,小编会及时回复大家的,在此小编也非常感谢大家对毛票票网站的支持!