Exemple de didacticiel d'utilisation d'un clip CSS pour implémenter la barre de progression de l'anneau de lecture audio

Du coup, il faut faire une sonnerie AudioLectureBarre de progression (l'effet dans l'image ci-dessus j'y pense depuis longtemps, mais ça). n’a pas été réalisé. Finalement, j'ai vérifié ma mère et j'ai découvert que le CSS avait aussi un attribut clip , qui répond parfaitement aux besoins. Partagez-le, cela pourra peut-être aider d'autres amis. Quant à savoir si c'est utile, je ne sais pas, peu importe ! OK, arrête de parler, c'est parti !

Attribut de clip CSS

  Commençons par comprendre brièvement l'attribut de clip CSS

Explication

Attribut de clip clips éléments absolument positionnés . Cette propriété permet de définir un rectangle de détourage. Pour un élément absolument défini, seul le contenu du rectangle est visible. Le contenu en dehors de cette zone de détourage sera traité en fonction de la valeur du débordement.

forme Définir la forme de l'élément. Les seules valeurs de forme légales sont : rect (haut, droite, bas, gauche)

auto Valeur par défaut. Aucun découpage n’est appliqué.

inherit spécifie que la valeur de l'attribut clip doit être héritée de l'élément parent.

Utiliser

    Le principe est : faire en sorte qu'un carré p n'affiche que la moitié droite par détourage, puis réaliser une bordure dans ce p par détourage (la taille de la bordure est la taille du barre de progression) Le demi-cercle gauche, car p n'affiche que la moitié droite, ce demi-cercle est rogné et n'est pas visible. Combinez ensuite la rotation pour faire pivoter le demi-cercle pour obtenir une barre de progression à moins de 50 %. Lorsqu'elle dépasse 50 %, annulez le découpage de p, puis utilisez un demi-cercle pour enregistrer 50 % de la barre de progression afin d'obtenir un effet de barre de progression de 100 %. . Collez le code, puis expliquez le code clé avec des commentaires.

/*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>

Démo complète, ici j'ai écrit un audioPlayPlugin.js, qui encapsule simplement les opérations courantes de la balise audio. Adresse Github, adresse de codage

Enfin, s'il y a quelque chose que je n'ai pas expliqué clairement ou que j'ai mal dit, vous pouvez laisser un message afin que nous puissions apprendre ensemble et progresser ensemble.

【Recommandations associées】

1. Recommandation spéciale : "php Programmer Toolbox" version V0.1 Télécharger

2. Tutoriel vidéo CSS en ligne gratuit

3 php.cn Dugu Jiujian (2) - Tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!