用JQUERY实现的吹泡泡js特效代码自己替换泡泡图效果更完美

稿源：互联网 2018-09-02 22:41:55 点击： 9666 撤稿纠错

一个吹泡泡效果，可以换成PNG透明的音符图片或花瓣，泡泡效果达到完美！

以下讨论的是和JQUERY 吹泡泡 js特效代码相关的用JQUERY实现的吹泡泡js特效代码自己替换泡泡图效果更完美教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>吹泡泡效果</title>
<style type="text/css">
*{margin: 0; padding: 0;}
html,body{height: 100%; overflow: hidden;}
#wrap{position: relative; height: 100%; width: 100%;}
.new_abs{position: absolute;}
#flash_box{width: 50%; height: 50%; left: 0; top: 0; position: relative;}
#flash_box img{
    -ms-animation: 2s linear 0s normal both infinite running rotateMe;
    -webkit-animation: 2s linear 0s normal both infinite running rotateMe;
    -moz-animation: 2s linear 0s normal both infinite running rotateMe;
    -o-animation: 2s linear 0s normal both infinite running rotateMe;
    animation: 2s linear 0s normal both infinite running rotateMe;
}
@-webkit-keyframes rotateMe{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-moz-keyframes rotateMe{
    0%{
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-o-keyframes rotateMe{
    0%{
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-ms-keyframes rotateMe{
    0%{
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotateMe{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
</style>
</head>
<body>
    <div id="wrap">
        <div id="flash_box"></div>
        <button id="run">开始</button>
        <button id="end">停止</button>
    </div>
<script type="text/javascript" src="http://www.alixixi.com/script/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    //吹泡泡效果
    var Flash = function(){
        this.len = 8;
        this.path = "http://js.alixixi.com/UploadPic/2018-9/";
        this.imgs = [
          '20189218265191806.png',
          '20189218265191806.png',
          '20189218265191806.png',
          '20189218265191806.png',
          '20189218265191806.png',
          '20189218265191806.png',
          '20189218265191806.png',
          '20189218265191806.png'
        ];
        this.status = false;
        this.speed = 400;
    };

    Flash.prototype = {
        _init: function(obj,text){
            var that = this;
            that.$el = $(obj);
            that.status = true;
            that._run();
        },
        _run: function(){
            var that = this;
            function run(){
                if(that.status == false){
                    return false;
                }
                var i = Math.random() * that.len >> 0;
                var img = new Image();
                img.src = that.path + that.imgs[i];
                img.style.right = 0;
                img.style.bottom = 0;
                img.style.width = '10px';
                img.className = 'new_abs';
                img.onload = function(){
                    var width = this.width;
                    that.$el.append(this);
                    var time = (Math.random() * 3000 >> 0) + 2000;
                    $(this).animate({
                        right: '100%',
                        bottom: '100%',
                        width: width
                    }, time, function(){
                        $(this).remove();
                    });
                };
                setTimeout(run,that.speed);
            }
            run();
        },
        _end: function(){
            var that = this;
            that.status = false;
        }
    };
    var flash = new Flash();
    $('#run').click(function(){
        flash._init('#flash_box');
    });
    $('#end').click(function(){
        flash._end();
    });
</script>
</body>
</html>

关于用JQUERY实现的吹泡泡js特效代码自己替换泡泡图效果更完美的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090295708.shtml方便下次再访问哦。

·上一篇： 滚动条在内容页翻页到指定ID时显示最下方浮动DIV层的特效
·下一篇： HTML5+Canvas制作的幻彩旋转圆盘特效

用JQUERY实现的吹泡泡js特效代码自己替换泡泡图效果更完美

文章分类LIST >>返回首页

最新游戏

最新新闻

用JQUERY实现的吹泡泡js特效代码 自己替换泡泡图效果更完美

文章分类LIST >>返回首页

最新游戏

最新新闻

用JQUERY实现的吹泡泡js特效代码自己替换泡泡图效果更完美