jquery实现拖动彩色泡泡进行合并融合效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：jquery实现拖动彩色泡泡进行合并融合效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        a, a:hover, a:visited, a:active {
          text-decoration: none;
          color: #333;
        }
        
        a.redraw {
          display: block;
          position: fixed;
          width: 100%;
          bottom: 0px;
          left: 0px;
          text-align: center;
          color: #333;
          text-decoration: none;
          font-size: 30px;
          display: none;
        }
        
        .dot {
          top: -100px;
          position: absolute;
          overflow: hidden;
          cursor: pointer;
          cursor: hand;
          -webkit-border-radius: 200px;
          -moz-border-radius: 200px;
          -ms-border-radius: 200px;
          -o-border-radius: 200px;
          border-radius: 200px;
          -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);
          -moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);
          box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);
        }
        .dot:after {
          content: "";
          display: block;
          -webkit-border-radius: 200px;
          -moz-border-radius: 200px;
          -ms-border-radius: 200px;
          -o-border-radius: 200px;
          border-radius: 200px;
        }
        .dot.up {
          cursor: move;
          z-index: 100;
        }
        .dot.merging {
          -webkit-transition: all 0.5s linear 0s;
          -moz-transition: all 0.5s linear 0s;
          -o-transition: all 0.5s linear 0s;
          transition: all 0.5s linear 0s;
        }
        .dot.merging.od {
          -webkit-transition: all 0.2s linear 0s;
          -moz-transition: all 0.2s linear 0s;
          -o-transition: all 0.2s linear 0s;
          transition: all 0.2s linear 0s;
          z-index: 100;
        }
        .dot.grow {
          z-index: 100;
          -webkit-border-radius: 1000px;
          -moz-border-radius: 1000px;
          -ms-border-radius: 1000px;
          -o-border-radius: 1000px;
          border-radius: 1000px;
        }
        .dot .overlap {
          position: absolute;
          -webkit-border-radius: 200px;
          -moz-border-radius: 200px;
          -ms-border-radius: 200px;
          -o-border-radius: 200px;
          border-radius: 200px;
          -webkit-transition: background-color 1.5s linear 0s;
          -moz-transition: background-color 1.5s linear 0s;
          -o-transition: background-color 1.5s linear 0s;
          transition: background-color 1.5s linear 0s;
        }
        
        .msg {
          position: fixed;
          z-index: 200;
          text-shadow: 0px 0px 2px rgba(100, 100, 100, 0.5);
        }
    </style>


</head>

<body>
    <div class="dots-container"></div>
    <a href="#" class="redraw">Again?</a>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script>
        function getRandomInt(min, max) {
          return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        
        function arrayUnion(array1, array2) {
          var newArray = [];
          $.merge($.merge(newArray, array1), array2);
          $.unique(newArray);
          return newArray;
        }
        
        $('body').ready(function ($) {
        
          window.dots = new BasicDots($);
        
        
          $('a.redraw').on('click', function (e) {
            e.preventDefault();
        
            $('a.redraw').fadeOut(100);
            $('.dots-container').html("");
            window.dots = new BasicDots($);
        
            return false;
          });
        
        });
        
        var BasicDots = function ($, generateDotData, onCompleted) {
          var _this = this;
        
          // ***************
          // Variables
          // ***************
        
          var dotData = [];
          var inters = [];
          var startPoint;
        
        
          // Called on instantiation
          function _init() {
            dotData = generateDotData();
            initializeDots();
        
            $(window).on('resize orientationchange', function () {
              layoutDots();
            });
        
            $('.dots-container').on('mousemove', function (e) {
              e.preventDefault();
            });
        
            $('.dots-container').on('completed', function () {
              onCompleted();
            });
          }
        
        
          // Application methods
        
          var generateDotData = generateDotData || function () {
            var dotData = [];
            var count = parseInt(($(window).height() + $(window).width()) / 75);
        
            // Create and draw dots
            for (var i = 0; i < count; i++) {
              var dot = {};
        
              dot.iD = "dot" + i;
        
              dot.diameter = getRandomInt(20, 100);
        
              dot.rgb = {
                r: getRandomInt(100, 255),
                g: getRandomInt(100, 255),
                b: getRandomInt(100, 255) };
        
        
              dotData.push(dot);
            }
            return dotData;
          };
        
        
          var onCompleted = onCompleted || function () {
            $('a.redraw').fadeIn();
          };
        
        
          var initializeDots = function () {
            // Draw dots
            for (var i = 0; i < dotData.length; i++) {
              var dot = dotData[i];
              drawDot(dot);
            }
        
            // Layout dots
            layoutDots();
        
            $('.dot').on('mousedown', function (e) {
              startDrag($(this), { x: e.clientX, y: e.clientY });
            });
          };
        
        
          var drawDot = function (dotData) {
            $('.dots-container').prepend('<div id="' + dotData.iD + '" class="dot"></div>');
        
            var $dot = $('#' + dotData.iD + '.dot');
        
            $dot.css({
              height: dotData.diameter,
              width: dotData.diameter,
              background: 'rgb(' + dotData.rgb.r + ',' + dotData.rgb.g + ',' + dotData.rgb.b + ')' });
        
          };
        
        
          var layoutDots = function () {
            var h = $(window).height();
            var w = $(window).width();
        
            $('.dot').each(function () {
              $dot = $(this);
        
              do {
                var top = getRandomInt(10, h - 110);
                var left = getRandomInt(10, w - 110);
        
                $dot.css({
                  top: top,
                  left: left });
        
        
                var collided = findCollisions($dot);
                var isCollided = collided.length > 0;
              } while (isCollided);
        
            });
          };
        
        
          var startDrag = function ($dot, startPoint) {
            $dot.addClass('up');
        
            var collided = [];
            $('.dots-container').on('mousemove', function (e) {
              e.preventDefault();
        
              // Move with drag
              var dX = e.clientX - startPoint.x;
              var dY = e.clientY - startPoint.y;
        
              $dot.css({
                left: parseFloat($dot.css('left').replace('px', '')) + dX + 'px',
                top: parseFloat($dot.css('top').replace('px', '')) + dY + 'px' });
        
        
              startPoint = {
                x: e.clientX,
                y: e.clientY };
        
        
        
              // Manage collisions
        
              var oldCollided = collided;
              collided = findCollisions($dot);
              var union = arrayUnion(oldCollided, collided);
              for (var i = 0; i < union.length; i++) {
                // Collide 
                if (oldCollided.indexOf(union[i]) == -1 && collided.indexOf(union[i]) > -1) {
                  collide($dot, $('#' + union[i]));
                  .........完整代码请登录后点击上方下载按钮下载查看