jQuery鼠标经过冒泡对话框特效js代码

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

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

以下是 jQuery鼠标经过冒泡对话框特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="gb2312">
    <title>jQuery��꾭��ð�ݶԻ�����Ч</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="src/jquery.thoughtBubble.css">
    <style type="text/css">
        body {
            background-color: #3399FF;
            color: white;
            font-family: 'avenir';
        }

        h1 {
            font-family: 'avenir';
            color: white;
        }

        #mainContainer {
            margin: 0px auto;
            text-align: center;
        }

        #mainContainer img {
            margin-top: 200px;
            border-radius: 50%;
            width: 250px;
            border: 3px solid black;
        }

        #codeContainer {
            text-align: center;
            width: 400px;
            margin: 0px auto;
            color: black;
        }

        pre {
            text-align: left;
            font-size: 19px;
            ';
        }

        .container {
            width: 80%;
            margin: 0px auto;
        }

        #about h2 {
        }

        ul ul li {
            list-style: none;
        }

        .inline-code {
            display: inline-block;
        }
    </style>

</head>

<body>
    <div id='mainContainer' class='container'>

        <img src='about1.png' id="thoughtBubble" alt='whats up?' />

    </div>

    <script src="src/jquery.min.js"></script>

    <script type="text/javascript" src='src/jquery.thoughtBubble.js'></script>

    <script type="text/javascript">

        $(window).ready(function () {

            $('#thoughtBubble').thoughtBubble({
                text: '����',
                font: 'avenir'

            });

        });

    </script>

</body>
</html>

JS代码(jquery.thoughtBubble.min.js):

(function(e){
	e.fn.thoughtBubble=function(t){
	var n=e.extend({
	backgroundColor:"white",fontColor:"black",width:"330px",height:"210px",fontSize:"15px",bubbleColor:"white",speed:125}
,t),r=function(e){
	var t=e.offset(),r=t.top-parseInt(n.height),s='"position:absolute;
	top:'+r+"px;
	left:"+t.left+"px;
	width:"+n.width+";
	height:"+n.height+';
	"',u="<div class='bubble-holder' style="+s+">"+i()+o()+"</div>";
	return u}
,i=function(){
	return'<div class="main-bubble-holder"><div class="bubble main-bubble">'+s()+"</div></div>"}
,s=function(){
	return'<span style="vertical-align:middle;
	color:'+n.fontColor+";
	font-size:"+n.fontSize+";
	font-family:"+n.font+'">'+n.text+"</span>"}
,o=function(){
	return'<div class="sm-bubble-holder"><div class="bubble bubbleLg"></div><div class="bubble bubbleMd"></div><div class="bubble bubbleSm"></div></div>'}
,u=function(){
	var t=e(document).find(".bubble"),r=t.get().reverse(),i=n.speed;
	e(r[0]).stop().animate({
	opacity:1}
,i,function(){
	e(r[1]).animate({
	opacity:1}
,i,function(){
	e(r[2]).animate({
	opacity:1}
,i,function(){
	e(r[3]).animate({
	opacity:1}
,i)}
)}
)}
)}
,a=function(){
	var t=e(document).find(".bubble");
	t.stop().animate({
	opacity:0}
)}
,f=function(t){
	var n=e(document).find(".bubble-holder"),r=t.offset().left;
	n.css("left",r)}
;
	return this.each(function(){
	var t=e(this),n=r(t);
	t.on("mouseenter",u);
	t.on("mouseout",a);
	e(window).on("resize",f.bind(this,t));
	return t.parent().prepend(n)}
)}
}
)(jQuery)

CSS代码(jquery.thoughtBubble.min.css):

.bubble,.bubbleLg,.bubbleMd,.bubbleSm{border-radius:50%;margin:5px 5px 5px 10px;opacity:0;background-color:#fff}
.sm-bubble-holder{width:100px;float:right}
.bubbleSm{width:10px;height:10px}
.bubbleMd{width:20px;height:20px;margin-left:15px}
.bubbleLg{width:30px;height:30px;margin-left:20px}
.main-bubble-holder{display:block}
.main-bubble{width:175px;height:60px;background-color:#fff;border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px;position:relative;margin:80px 10px 10px 150px}
.main-bubble:after,.main-bubble:before{content:'';position:absolute;background-color:#fff;z-index:-1}
.main-bubble:after{width:50px;height:50px;top:-25px;left:25px;border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px}
.main-bubble:before{width:90px;height:90px;top:-45px;right:25px;border-radius:200px;-webkit-border-radius:200px;-moz-border-radius:200px}

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