Tutorial-Beispiel für die Verwendung eines CSS-Clips zur Implementierung der Ring-Fortschrittsleiste für die Audiowiedergabe

Plötzlich besteht die Notwendigkeit, einen Ring AudioWiedergabeFortschrittsbalken zu erstellen (der Effekt im Bild oben) aber es wurde nicht realisiert. Schließlich habe ich meine Mutter überprüft und herausgefunden, dass CSS auch ein Clip-Attribut hat, das die Anforderungen perfekt erfüllt. Teilen Sie es, vielleicht kann es anderen Freunden helfen. Ob es nützlich ist, weiß ich nicht, wen interessiert das? OK, hör auf zu reden, lass uns gehen!

CSS-Clip-Attribut

  Lassen Sie uns zunächst kurz das CSS-Clip-Attribut verstehen

Erklärung

Clip-Attribut schneidet absolut positionierte Elemente ab . Diese Eigenschaft wird verwendet, um ein Beschneidungsrechteck zu definieren. Bei einem absolut definierten Element ist nur der Inhalt innerhalb des Rechtecks ​​sichtbar. Inhalte außerhalb dieses Beschneidungsbereichs werden entsprechend dem Überlaufwert verarbeitet.

Form Legen Sie die Form des Elements fest. Die einzigen zulässigen Formwerte sind: rect (oben, rechts, unten, links)

automatischer Standardwert. Es wird kein Clipping angewendet.

inherit gibt an, dass der Wert des Clip-Attributs vom übergeordneten Element geerbt werden soll.

Verwenden Sie

     Das Prinzip ist: Lassen Sie ein quadratisches p durch Ausschneiden nur die rechte Hälfte anzeigen und erstellen Sie dann durch Ausschneiden einen Rahmen mit einem Rand in diesem p (die Größe des Randes ist die Größe des Fortschrittsbalkens) Der linke Halbkreis, da p nur die rechte Hälfte anzeigt, ist dieser Halbkreis beschnitten und nicht sichtbar. Kombinieren Sie dann die Drehung, um den Fortschrittsbalken innerhalb von 50 % zu drehen. Wenn er 50 % überschreitet, brechen Sie das Abschneiden von p ab und verwenden Sie dann einen Halbkreis, um 50 % des Fortschrittsbalkens zu speichern, um einen Fortschrittsbalken von 100 % zu erzielen . Fügen Sie den Code ein und erläutern Sie dann den Schlüsselcode mit Kommentaren.

/*Css部分*/
.circleProgress_wrapper{/*设置圆环的大小*/
    margin: auto;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    cursor: pointer;
}
.slice{ /*这是一个裁去了左半部分，只显示右半部分的p*/
    position: absolute; /*必须是绝对定位元素，clip属性才会有效*/
    width: 100%;
    height: 100%;
    clip:rect(0,200px,200px,100px);/*top:0,right:200,bottom:200,left:100裁剪出右半部*/
}
.slice.gt50{/*当进度超过50%时，取消剪裁*/
    clip:rect(auto,auto,auto,auto);
}
.bar,.fill{ /*两个只显示左半部分的半圆*/
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 4px rgba(255, 249, 0, 0.77) solid;/*设置进度条大小和颜色值*/
    border-radius: 50%;
    clip: rect(0,100px,200px,0);/*top:0,right:100,bottom:200,left:0裁剪出左半部*/
}
.slice.gt50 .fill{/*当进度超过50%时，让fill旋转180度填充50%*/
    trans
for
m: rotate(180deg);
}
<!--html 部分 -->
<p class="circleProgress_wrapper">
    <p id="slice_wrapper" class="slice">    
        <p class="bar pre50"></p>
        <p class="fill"></p>
    </p>
</p>
//javscript部分
<script type="text/
javascript
" src="src/audioPlayPlugin.
js
"></script>
<script>
var bar=
document
.querySelector(".slice>.bar"),
    process=0,
    circleProgress=document.querySelector(".circleProgress_wrapper"),
    slice=document.getElementById("slice_wrapper");
var audio=
new
 audioController({ //创建一个音频
对象
        src:"
file
/test1.mp3",
        "
time
up
date
":function(){//监听timeupdate
事件
，也就是音频当前播放进度发生改变响应的事件
            /*
            *audio.getAttr("
current
Time" 获取当前播放的时间 s
            *audio.getAttr("duration") 获取音频时长
            *它们的比正好就是当前播放进度
            *再乘以360转换为进度条应该旋转的角度
            */
            process=audio.getAttr("currentTime")/audio.getAttr("duration")*360;
             parseInt(process)===180&&add
Class
(slice,"gt50");//当等于50%时，使用fill占满50%的进度条
              bar.style="transform:rotate("+(process)+"deg)";//根据播放进度设置
更新
进度条
            }
        }
    });
circleProgress.addEvent
List
ener("click",function(){ //点击播放
     if(audio.getAttr("paused")){                             
         audio.play()
     }
else
{
         audio.pause()
     }
 });
 function addClass(element,className){/*添加类名，完整代码已省略*/
    ...
 }
</script>

Vollständige Demo, hier habe ich ein audioPlayPlugin.js geschrieben, das einfach die allgemeinen Operationen von Audio-Tags kapselt. Github-Adresse, Codierungsadresse

Wenn ich schließlich etwas nicht klar erklärt oder falsch gesagt habe, können Sie gerne eine Nachricht hinterlassen, damit wir gemeinsam lernen und gemeinsam Fortschritte machen können.

【Verwandte Empfehlungen】

1. Besondere Empfehlung: „php Programmer Toolbox“ V0.1 Version herunterladen

2. Kostenloses CSS-Online-Video-Tutorial

3. php.cn Dugu Jiujian (2) - CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonTutorial-Beispiel für die Verwendung eines CSS-Clips zur Implementierung der Ring-Fortschrittsleiste für die Audiowiedergabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!