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.........完整代码请登录后点击上方下载按钮下载查看