主页 / user-422305

ck1e's questions

Martin Hope
ck1e
Asked: 2022-07-04 09:15:03 +0000 UTC
  • 1

我想在一个圆圈（红色圆圈）内制作一个浮动元素（白色圆圈），如下所示。但是，如果您将元素移近圆的角，则元素会超出圆的边界。

如何对元素进行约束，使其不超出外圈？

PS我尝试应用一个单位圆，找到了外圆中心到元素当前位置的距离，如果这个距离大于1，那么它并没有改变元素的位置，但这导致到元素的阻塞（不再移动）。

const
  stick = document.querySelector("#stick"),
  stickWidth = stick.clientWidth,
  stickHeight = stick.clientHeight,
  stickArea = stick.parentNode,
  stickAreaWidth = stickArea.clientWidth,
  stickAreaHeight = stickArea.clientHeight

stick.style.left = (stickAreaWidth - stickWidth) / 2 + 'px'
stick.style.top = (stickAreaHeight - stickHeight) / 2 + 'px'


stick.onmousedown = function(event) {
  event.preventDefault();

  let shiftX = event.clientX - stick.getBoundingClientRect().left;
  let shiftY = event.clientY - stick.getBoundingClientRect().top;

  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);

  function onMouseMove(event) {
    let
      newLeft = event.clientX - shiftX - stickArea.getBoundingClientRect().left,
      newTop = event.clientY - shiftY - stickArea.getBoundingClientRect().top,
      rightEdge = stickAreaWidth - stickWidth,
      topEdge = stickAreaHeight - stickHeight,
      dataStick = getDataStick(stick);


    if (newLeft < 0) newLeft = 0;
    if (newTop < 0) newTop = 0;

    if (newLeft > rightEdge) newLeft = rightEdge;
    if (newTop > topEdge) newTop = topEdge;

    // if (dataStick.distance > 1) {
    //     return
    // }

    stick.style.left = newLeft + 'px';
    stick.style.top = newTop + 'px';

  }

  function onMouseUp() {
    document.removeEventListener('mouseup', onMouseUp);
    document.removeEventListener('mousemove', onMouseMove);
  }
};

stick.ondragstart = function() {
  return false;
};


function getDataStick(stick) {
  const
    parentPos = stick.parentNode.getBoundingClientRect(),
    stickPos = stick.getBoundingClientRect(),
    x = (parentPos.left - stickPos.left) / (stick.parentNode.clientWidth - stick.clientWidth) * (-2) - 1,
    y = (parentPos.top - stickPos.top) / (stick.parentNode.clientHeight - stick.clientHeight) * 2 + 1,
    data = {}

  data.x = x
  data.y = y
  data.distance = (Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2))).toFixed()

  return data
}
body {
  width: 100vw;
  height: 100vh;
  font-size: 16px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #212529;
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.5);
}

.wrapper {
  width: 90vw;
  height: 90vw;
  max-width: 300px;
  max-height: 300px;
  position: relative;
  display: flex;
  justify-content: space-around;
  background: brown;
  border-radius: 50%;
}

#stick {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  background-color: white;
  cursor: pointer;
}
<div class="container">
  <div class="wrapper">
    <div id="stick"></div>
  </div>
</div>

javascript
Martin Hope
ck1e
Asked: 2022-05-02 01:27:04 +0000 UTC
  • 1

您需要确保当您将鼠标悬停在 .item 块上时，会出现 .item__info 块并与下面的块 (.block) 重叠，并带有几个强制性条件

  1. .wrapper 应该有position: relative; overflow-x: hidden;
  2. .item 已设置块高度style="height: 40px"

.wrapper 是一种滑块，因此会有多个 .items，因此是overflow-x: hidden;必需的。并且需要高度，以便在悬停在目标上时底层元素不会“跳跃”

.wrapper {
  position: relative;
  z-index: 0;
  overflow-x: hidden;
  overflow-y: visible;
  width: max-content;
}

.item {
  background: red;
  width: max-content;
  padding: 25px;
}

.item__name {
  margin-bottom: 15px;
}

.item__info {
  opacity: 0;
  visibility: hidden;
  height: 0;
  display: none;
  background: green;
}

.item:hover .item__info {
  opacity: 1;
  visibility: visible;
  height: auto;
  display: block;
}

.block {
  background: blue;
  width: 100px;
  margin-top: 5px;
}
<div class="wrapper">
  <div class="item" style="height: 40px">
    <div class="item__name">Name</div>
    <div class="item__info">
      <div>123</div>
      <div>456</div>
    </div>
  </div>
</div>

<div class="block">
  123123123123
</div>

javascript
Martin Hope
ck1e
Asked: 2022-04-12 17:11:23 +0000 UTC
  • 0

我有自己的 post_type “服务”，它有自己的分类“服务类别”。好吧，因此，这个 post_type 中的条目是按标题分布的，只有在每个标题中都有一个与标题对应的帖子。例如，有一个标题“kt”，它有描述、图片、名称，这个标题包含条目“kt”，以及其他条目。

在 /services 页面上，我需要显示“服务类别”中所有类别的列表，而不是它们的描述等条目，以及与此类别相关的所有条目的列表

我试图通过get_categories在archive-services.php中显示类别，一切都显示了，但是切换到特定类别后，single.php被连接，并且在某些page.php上

如何正确实施这个想法？

<?
$categories = get_terms( array(
    'taxonomy'      => array( 'services-category' ), // название таксономии с WP 4.5
    'orderby'       => 'name',
    'order'         => 'ASC',
    'hide_empty'    => false,
) );

if( $categories ):
    foreach( $categories as $cat ):
        $image_id = get_term_meta( $cat->term_id, '_thumbnail_id', 1 );
        $image_url = wp_get_attachment_image_url( $image_id, 'full' );
        ?>
        <div class="col2">
            <div class="service">
                <div class="preview">
                    <img src="<?= $image_url ?>">
                </div>
                <div class="description box">
                    <h2><a href="<?= get_term_link($cat) ?>"><?= $cat->name?></a></h2>
                    <p><?= $cat->description?></p>
                </div>
            </div>
        </div>
    <?endforeach;
endif;
?>
wordpress
Martin Hope
ck1e
Asked: 2022-03-08 05:21:43 +0000 UTC
  • 2

如何添加border-radius网格行的最后一个元素（蓝色和灰色），就像第一个元素一样？最好不用js

https://codepen.io/ck1e/pen/VwmGoLZ

.colors {
  width: 320px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 60px);
  grid-auto-rows: 40px;
  overflow: hidden;
  border-radius: 12px;
}

.color:nth-child(1) {
  background-color: red;
}

.color:nth-child(2) {
  background-color: #272729;
}

.color:nth-child(3) {
  background-color: #C71F2D;
}

.color:nth-child(4) {
  background-color: #FAE03C;
}

.color:nth-child(5) {
  background-color: #1F5DA0;
}

.color:nth-child(6) {
  background-color: #F96714;
}

.color:nth-child(7) {
  background-color: #00A28A;
}

.color:nth-child(8) {
  background-color: #58C9D4;
}

.color:nth-child(9) {
  background-color: #E1E1E1;
}

.color:last-child {
  border-radius: 0px 0px 12px 0px;
}
<div class="colors">
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
</div>

javascript