2020年新年大赛！

Question

Александр

Asked:2020-06-25 20:01:35 +0000 UTC2020-06-25 20:01:35 +0000 UTC 2020-06-25 20:01:35 +0000 UTC

温度计填充动画 svg + jquery

772

我想做一个温度计，这样当你点击复选框时，填充从下往上顺利进行，包括温度计的分区（因此，当复选框被删除时，填充也会顺利进行） . 对如何为此进行填充和固定 jquery 感兴趣。（复选框的工作方式类似于 toogleClass("check")）。

这是我在 Jquery 中搞砸的

$(".analysis-li").click(function(){
    $(this).toggleClass("check");
    var firstStop = document.getElementById('F1gst1');
    percentage = '10%'; firstStop.setAttribute('offset',percentage);
});

有必要使每个检查类的百分比增加，当这个类被移除时，它会再次减少。下面是html和css

<li class="analysis-li"></li>
<li class="analysis-li"></li>
<li class="analysis-li"></li>
<li class="list analysis-li"></li>
<li class="list analysis-li"></li>
<li class="analysis-li"></li>

li.analysis-li 
    margin-bottom: 54px
    position: relative
    padding-left: 20px
    cursor: pointer

    &::before
        position: absolute
        content: ''
        width: 34px
        height: 34px
        left: -34px
        bottom: 3px
        border: #d3ad4b solid 3px
        background-color: transparent
        cursor: pointer
        background-image: url(../img/check.png) 
        background-repeat: no-repeat
        background-position: center
        background-size: 0

    &.check::before
        background-size: 30px

    &:hover::before
        border-color: #c29846
        transition: .3s

4 个回答

Voted

Stranger in the Q · Answer 1 · 2020-06-25T21:22:39Z

这里我整理了一些类似的东西，对不起，没有骑师，我将布局更改为软件，如果不需要，您可以html通过调试器从片段中复制完成的一个

let path = (y, d, extra) => `<path d="${d}" transform="translate(0,${y})" ${extra||''}></path>`
let multi = (count, html) => Array(count).fill(0).map((e, i) => html(i)).join('');
let toggle = el => el.classList.toggle('on') | 
   rect.setAttribute('y', 14.6*(7-document.querySelectorAll("path.on").length)+8)
scale.innerHTML = multi(10, i => path(i*10, 'M60,10h10M65,12h5M65,14h5M65,16h5M65,18h5'));
checks.innerHTML = multi(7, i => path(i*12, 'M10,10v8h8v-8z', 'class="on" onclick="toggle(this)"') +
                                 path(i*12, 'M12,14l2.2,2l2.2,-4'))

g#scale path { 
  stroke: white; 
  stroke-width: 0.7; 
}

#checks { 
  position: absolute; 
  top: 20px; 
  left: 20px; 
}

#checks path {
  fill: none;
  pointer-events: all;
  stroke: #f5b53a;
  cursor:pointer;
  stroke-linejoin:round;
}

#checks path.on + path {
  opacity:1;
}

#checks path:nth-child(2n) {
 opacity: 0;
 pointer-events: none;
 transition: 0.5s;
 stroke: white;
}

<svg viewbox="0 0 135 135" height="90vh" style="background-color:purple">
  <defs><mask id="termometer">
    <path d="M80,10v100" stroke="white" stroke-width="5" stroke-linecap="round"></path>
    <circle r="10" cy="120" cx="80" fill="white"></circle>
    <g id="scale"></g>
  </mask></defs>
  <rect width="130" height="130" mask="url(#termometer)" fill="white"></rect>
  <rect id="rect" style="transition:1s" y="8" width="130" height="130" 
        mask="url(#termometer)" fill="#f5b53a"></rect>
  <g id="checks"></g>
</svg>

Monkey Mutant · Answer 2 · 2020-06-26T11:29:44Z

一般来说，像这样

全屏观看

let move = cb => rect.setAttribute('y', 400 - cb.textContent*50)

document.querySelectorAll('.checkbox')
        .forEach(cb => cb.addEventListener('click', e => move(cb)))

* {
  user-select: none;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.text {
  font-size: 20px;
  fill: #fff;
  font-weight: 900;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.svg-event {
  width: 800px;
  position: relative;
  margin: 30px auto;
}

.panel {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 100px;
  height: 500px;
}

.panel div {
  width: 50px;
  height: 50px;
  background: #fbfbfb;
  margin: 18px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Times New Roman', Times, serif;
  font-weight: 900;
}

#rect {
  transition: 0.68s cubic-bezier(0.05, 1.06, 0.71, 0.4);
}

<div class="svg-event">
  <svg width="800px" height="600px">
        <mask id="mask">
            <rect width="100%" height="100%" x="0" y="0" fill="white"/>
            <circle  cx="450" cy="450" r="50" />
            <rect x="435.8" y="50" width="30" height="360" rx="14" />
            <g transform="translate(350,30)">
            <g id="line">
                <rect  width="100" height="5" x="-45" y="20"/>
                <rect  width="40" height="5" x="15" y="30"/>
                <rect  width="40" height="5" x="15" y="40"/>
                <rect  width="40" height="5" x="15" y="50"/>
                <rect  width="40" height="5" x="15" y="60"/>
            </g>
                <use xlink:href="#line" y="50" />
                <use xlink:href="#line" y="100" />
                <use xlink:href="#line" y="150" />
                <use xlink:href="#line" y="200" />
                <use xlink:href="#line" y="250" />
                <use xlink:href="#line" y="300" />
            </g>
       </mask>

       <rect id="rect" width="800" height="600" fill="orange" y="400"/>
       <rect width="800" height="600" fill="#8E7CFF" mask="url(#mask)"/>

       <g transform="translate(220,40)">
           <text class="text" x="100" y="0">7</text>
           <text class="text" x="100" y="50">6</text>
           <text class="text" x="100" y="100">5</text>
           <text class="text" x="100" y="150">4</text>
           <text class="text" x="100" y="200">3</text>
           <text class="text" x="100" y="250">2</text>
           <text class="text" x="100" y="300">1</text>
       </g>
       <g>
           <text class="text" x="500" y="70">
               Высокая темпиратура
           </text>
           <text class="text" x="500" y="210">
                Средняя темпиратура
            </text>
            <text class="text" x="500" y="360">
                Низкая темпиратура
            </text>
       </g>
    </svg>
  <div class="panel">
    <div class="checkbox" tabindex="7">7</div>
    <div class="checkbox" tabindex="6">6</div>
    <div class="checkbox" tabindex="5">5</div>
    <div class="checkbox" tabindex="4">4</div>
    <div class="checkbox" tabindex="3">3</div>
    <div class="checkbox" tabindex="2">2</div>
    <div class="checkbox" tabindex="1">1</div>
  </div>
</div>

Alexandr_TT · Answer 3 · 2020-06-30T15:48:18Z

jQuery 解决方案

这就是我将如何做到的。要为我使用的渐变设置动画requestAnimationFrame。我正在stop为 10% 和 100% 之间的第二个偏移设置动画，但您可以选择您想要的值。

请阅读代码中的注释。

	// Второй stop градиента
 let laststop = document.getElementById('F1gst2');
 // переменная, используемая для переключения анимации
 let n = 0;
 // целевое значение атрибута смещения
 let target;
 // фактическое значение атрибута смещения (offset)
 let val = 10;
 //идентификатор кадра анимации запроса
 let rid = null;

$(".analysis-li").click(function(){
   
   n++;
   // установить целевое значение
   if(n%2 == 1){
     target = 100; 
   }else{target = 10}
    // если есть анимация, то  остановить  
    if(rid){cancelAnimationFrame(rid); rid="null"}
    // вызвать функцию кадра
    frame()      
});


function frame(){
  rid = requestAnimationFrame(frame);
  //расстояние между значением и целевым значением
  dist = target - val;
  //Увеличить значение
  val += dist/10;
  // установить значение offset
  laststop.setAttributeNS(null,"offset",`${val}%`)
}

svg{border:1px solid; width:30px}
path{stroke:black;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="analysis-li">click here</p>
<svg class="thermometr" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.3 333.8" >
                <linearGradient y2="0%" x2="0%" y1="100%" x1="0%" id="F1g">
                  <stop stop-color="#00FF00" offset="0%" id="F1gst1"/>
                  <stop stop-color="#FFFFFF" offset="10%" id="F1gst2"/>
                </linearGradient>
                <path fill="url(#F1g)" class="st0" d="M30.5 297.5V4.6c0-2.5-2.1-4.6-4.6-4.6-2.5 0-4.6 2.1-4.6 4.6v292.9c-7.9 2-13.8 9.2-13.8 17.8 0 10.2 8.2 18.4 18.4 18.4s18.4-8.2 18.4-18.4c0-8.5-5.9-15.7-13.8-17.8"/>
  <path fill="url(#F1g)" class="st0"  d="M9 290.2h7.5v.5H9zM9 284.3h7.5v.6H9zM9 278.4h7.5v.5H9zM9 272.5h7.5v.6H9zM0 266.6h16.5v.6H0zM9 260.7h7.5v.5H9zM9 254.8h7.5v.6H9zM9 248.9h7.5v.5H9zM9 243h7.5v.6H9zM0 237.1h16.5v.6H0zM9 231.3h7.5v.5H9zM9 225.4h7.5v.6H9zM9 219.5h7.5v.6H9zM9 213.6h7.5v.6H9zM0 207.7h16.5v.6H0zM9 201.8h7.5v.6H9zM9 195.9h7.5v.6H9zM9 190h7.5v.6H9zM9 184.1h7.5v.5H9zM0 178.2h16.5v.6H0zM9 172.3h7.5v.6H9zM9 166.4h7.5v.5H9zM9 160.5h7.5v.6H9zM9 154.7h7.5v.6H9zM0 148.8h16.5v.6H0zM9 142.9h7.5v.6H9zM9 137h7.5v.5H9zM9 131.1h7.5v.5H9zM9 125.2h7.5v.6H9zM0 119.3h16.5v.5H0zM9 113.4h7.5v.6H9zM9 107.5h7.5v.6H9zM9 101.6h7.5v.5H9zM9 95.7h7.5v.6H9zM0 89.8h16.5v.6H0zM9 83.9h7.5v.6H9zM9 78.1h7.5v.6H9zM9 72.2h7.5v.6H9zM9 66.3h7.5v.6H9zM0 60.4h16.5v.6H0zM9 54.8h7.5v.6H9zM9 48.9h7.5v.6H9zM9 43h7.5v.5H9zM9 37.1h7.5v.6H9zM0 31.2h16.5v.5H0zM9 26h7.5v.6H9zM9 20.1h7.5v.5H9zM9 14.2h7.5v.6H9zM9 8.3h7.5v.6H9zM0 2.4h16.5V3H0z"/>
    </svg>

答案来源：@enxaneta

Александр · Answer 4 · 2020-06-28T14:51:11Z

Best Answer

Александр

2020-06-28T14:51:11Z2020-06-28T14:51:11Z

我通过安装渐变来解决这个问题。如果你有，不要忘记删除 svg 中的样式标签。渐变插入到路径之前的 svg 标签之后。

<linearGradient y2="0%" x2="0%" y1="100%" x1="0%" id="F1g"><stop stop-color="#00FF00" offset="0%" id="F1gst1"/><stop stop-color="#FFFFFF" offset="0%" id="F1gst2"/></linearGradient>

然后，在 offset 的帮助下，我实现了填充百分比。然后是元素个数和选中元素个数的比较。然后给出结果。

var firstStop = document.getElementById('F1gst1');
percentage = '0%';
var CountAllCheckboxes = $('.analysis-li').length;
var CountChecked = 0;

$(".analysis-li").click(function(){
    $(this).toggleClass("check");

    CountChecked = $('.analysis-li.check').length;
    percentage = ((CountChecked / CountAllCheckboxes) * 100)+'%';
    firstStop.setAttribute('offset',percentage);
});

流畅动画解决方案https://stackoverflow.com/a/56836400/11707220

1

温度计填充动画 svg + jquery

jQuery 解决方案

根据浏览器窗口的大小调整背景图案的大小

理解for循环的执行逻辑

复制动态数组时出错（C++）

Or and If,elif,else 构造[重复]

如何构建支持 x64 的 APK

如何使按钮的输入宽度？

如何显示对象变量的名称？

如何循环一个函数？

LOWORD 宏有什么作用？

从字符串的开头删除直到并包括一个字符

温度计填充动画 svg + jquery

4 个回答

jQuery 解决方案

相关问题