javascript - Bootstrap 右下角偏移的较大圆圈内的小圆圈切口

Question

我在 JavaScript 中创建了一个图像数组，并在使用拆分的页面上的图像行中(这是有原因的)，该行中的所有图像都被圈起来，看起来像这样

但我需要在大圆圈的右下角添加一个小圆圈切口以展示较小的图像这是它应该的样子

我无法弄清楚，有人可以帮忙吗？

我的 JavaScript 和 bootstrap 代码如下。

Bootstrap

<div class="row" id="partner_row"></div>

带分割的 Javascript 图像数组

let image_arr = [{
    id: 'part_1',
    image_src: '../assets/partner1.jpg',
    h6_tag: 'Bradley Hunter',
    p_tag: 'Based in Chicago. I love playing tennis and loud music.',
  },
  {
    id: 'part_2',
    image_src: '../assets/partner2.jpg',
    h6_tag: 'Marie Bennet',
    p_tag: 'Currently living in Colorado. Lover of art, languages and travelling.',
  },
  {
    id: 'part_3',
    image_src: '../assets/partner3.jpg',
    h6_tag: 'Diana Wells',
    p_tag: 'Living in Athens, Greece. I love black and white classics, chillout music green tea.',
  },
  {
    id: 'part_4',
    image_src: '../assets/partner4.jpg',
    h6_tag: 'Christopher Pierce',
    p_tag: 'Star Wars fanatic. I have a persistent enthusiasm to create new things.',
  },
];

$(document).ready(function () {
  // create
  createPartnerRow(image_arr);
  // set image background
})

$(document).ready(function () {
  $("[id^=part_]").hover(function (image_arr) {
      $(this).addClass('border')
    },
    function () {

    });
});

$("[id^=part_]").ready(function () {
  $("[id^=part_]").click(function () {
    $(this).removeClass('border')
    // set value
    var current_partner = image_arr[0];
    // remove first element from array
    image_arr = image_arr.splice(1, 4);
    // append current_partner to end of array
    image_arr.push(current_partner);
    // clear the row of all partners;
    $('#part_1, #part_2, #part_3, #part_4').remove();
    // recreate row
    console.log(image_arr);
    createPartnerRow(image_arr);
  });
})


function createPartnerRow(image_arr) {
  for (i = 0; i < image_arr.length; i++) {
    $('#partner_row').append(
      '<div class="col-md-3 col-sm-6 p-3" id="' + image_arr[i].id + '">' +
      '<button class="border-0 bg-white">' +
      '<img class="rounded-circle img-fluid mx-auto d-block" src="' + image_arr[i].image_src + '"' + '/>' +
      '<h6 class="text-center g-mt-50 font-weight-bold pt-2">' + image_arr[i].h6_tag + '</h6>' +
      '<p class="text-center g-mt-50 pt-2">' + image_arr[i].p_tag + '</p>' +
      '</button>' +
      '</div>'
    )
  }
}

Answer 1

我不确定 Bootstrap 的内容，但从概念上讲，您需要做的就是为较小的圆圈添加一个额外的元素。如果它具有与背景相同的边框颜色，即使在技术上并非如此，它也会给人一种被剪掉的感觉。

let image_arr = [{
    id: 'part_1',
    image_src: 'http://placeimg.com/100/100/animals?t=1570040444517',
    h6_tag: 'Bradley Hunter',
    p_tag: 'Based in Chicago. I love playing tennis and loud music.',
    pin: 'a',
  },
  {
    id: 'part_2',
    image_src: 'http://placeimg.com/100/100/animals?t=1570040444516',
    h6_tag: 'Marie Bennet',
    p_tag: 'Currently living in Colorado. Lover of art, languages and travelling.',
    pin: 'b',
  },
  {
    id: 'part_3',
    image_src: 'http://placeimg.com/100/100/animals?t=1570040444515',
    h6_tag: 'Diana Wells',
    p_tag: 'Living in Athens, Greece. I love black and white classics, chillout music green tea.',
    pin: 'c',
  },
  {
    id: 'part_4',
    image_src: 'http://placeimg.com/100/100/animals?t=1570040444514',
    h6_tag: 'Christopher Pierce',
    p_tag: 'Star Wars fanatic. I have a persistent enthusiasm to create new things.',
    pin: 'd',
  },
];

$(document).ready(function () {
  // create
  createPartnerRow(image_arr);
  // set image background
})

$(document).ready(function () {
  $("[id^=part_]").hover(function (image_arr) {
      $(this).addClass('border')
    },
    function () {

    });
});

$("[id^=part_]").ready(function () {
  $("[id^=part_]").click(function () {
    $(this).removeClass('border')
    // set value
    var current_partner = image_arr[0];
    // remove first element from array
    image_arr = image_arr.splice(1, 4);
    // append current_partner to end of array
    image_arr.push(current_partner);
    // clear the row of all partners;
    $('#part_1, #part_2, #part_3, #part_4').remove();
    // recreate row
    console.log(image_arr);
    createPartnerRow(image_arr);
  });
})


function createPartnerRow(image_arr) {
  for (i = 0; i < image_arr.length; i++) {
    $('#partner_row').append(
      '<div class="col-md-3 col-sm-6 p-3" id="' + image_arr[i].id + '">' +
      '<button class="border-0 bg-white">' +
      '<div class="facebox"><img class="rounded-circle img-fluid mx-auto d-block" src="' + image_arr[i].image_src + '"' + '/><span class="pin">' + image_arr[i].pin + '</span></div>' +
      '<h6 class="text-center g-mt-50 font-weight-bold pt-2">' + image_arr[i].h6_tag + '</h6>' +
      '<p class="text-center g-mt-50 pt-2">' + image_arr[i].p_tag + '</p>' +
      '</button>' +
      '</div>'
    )
  }
}

#partner_row {display:flex;}
.bg-white {background: transparent;}
.facebox{
position:relative;
display:inline-block; margin:auto;
width:80px; font-size:0;
}
.facebox .rounded-circle{
width:100%; border-radius:50%;
}
.facebox .pin {
display:block;
width:22px;
height:22px;
border:3px solid white;
border-radius:50%;
background:blue;
position:absolute;
bottom:-3px;
right:-3px;
  color:white; text-align:center; font-size:13px; line-height:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="partner_row"></div>