突然、リングオーディオプレーヤープログレスバーを作成する必要があります(上の写真のエフェクト)。長い間考えてきましたが、実現できませんでした。最後に、母に確認したところ、CSS にも clipattribute があることがわかりました。これはニーズを完全に満たしています。共有すれば、他の友達にも役立つかもしれません。それが役に立つかどうかはわかりませんが、誰が気にするでしょうか。 OK、話はやめて、行きましょう!
CSS クリップ属性
CSS クリップ属性を簡単に理解しましょう
説明
クリップ属性は、絶対配置された要素をクリップします。このプロパティは、クリッピング四角形を定義するために使用されます。絶対的に定義された要素の場合、四角形内のコンテンツのみが表示されます。このクリッピング領域外のコンテンツは、オーバーフローの値に従って処理されます。
shape 要素の形状を設定します。唯一の有効な形状値は、rect (上、右、下、左)
auto デフォルト値です。クリッピングは適用されません。
inherit は、clip 属性の値が親要素から継承されることを指定します。
使用
実際の原理は、正方形のpにクリッピングで右半分だけを表示させ、そのpにクリッピングで枠線付きの左半円(枠線のサイズはプログレスバーのサイズ)を作成するというものです。 , p は右半分だけを表示するので、この半円を切り取るだけで見えなくなります。次に、回転を組み合わせて半円を回転させ、進行状況バーが 50% を超えたら、p のクリッピングをキャンセルして、半円を使用して進行状況バーの 50% を保存し、100% の進行状況バーを実現します。 。コードを貼り付けて、キーコードをコメントで説明します。
/*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>
完全なデモ。ここでは、オーディオ タグの一般的な操作を単純にカプセル化する audioPlayPlugin.js を作成しました。 Github アドレス、コーディング アドレス
最後に、私が明確に説明していないことや間違ったことを言った場合は、メッセージを残していただければ、一緒に学び、一緒に進歩することができます。
【関連推奨事項】
1. 特別な推奨事項: 「php Programmer Toolbox」V0.1 バージョンのダウンロード
3. Jiijian (2) - CSS ビデオチュートリアル
以上がCSS クリップを使用してオーディオ再生リング プログレス バーを実装するチュートリアルの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。