CSS 클립을 사용하여 오디오 재생 링 진행률 표시줄을 구현하는 튜토리얼 예

갑자기 오디오재생진행 표시줄을 만들어야 할 필요성이 생겼습니다(위 사진의 효과). 실현되지 않았습니다. 마지막으로 어머니를 확인해 보니 CSS에도 clip 속성 이 있는데, 이는 요구 사항을 완벽하게 충족합니다. 공유해 보세요. 다른 친구들에게 도움이 될 수도 있습니다. 그것이 유용한지 아닌지는 누가 신경쓰는지 모르겠습니다! 자, 그만 얘기하자!

CSS 클립 속성

  먼저 CSS 클립 속성에 대해 간단히 알아보겠습니다

설명

클립 속성 클립은 절대 위치에 있는 요소입니다. . 이 속성은 클리핑 사각형을 정의하는 데 사용됩니다. 절대적으로 정의된 요소의 경우 사각형 내의 내용만 표시됩니다. 이 클리핑 영역 외부의 콘텐츠는 오버플로 값에 따라 처리됩니다.

shape 요소의 모양을 설정합니다. 유효한 유일한 모양 값은 직사각형(위, 오른쪽, 아래, 왼쪽)

자동 기본값입니다. 클리핑이 적용되지 않습니다.

inherit는 클립 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

을 사용하세요    원칙은 정사각형 p를 클리핑으로 오른쪽 절반만 표시하게 한 다음 클리핑을 통해 이 p에 테두리를 만듭니다(테두리의 크기는 진행률 표시줄) 왼쪽 반원. p는 오른쪽 절반만 표시하므로 이 반원은 잘려서 볼 수 없습니다. 그런 다음 회전을 결합하여 반원을 회전시켜 50% 이내의 진행률 표시줄을 달성합니다. 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 버전 다운로드

2. 무료 CSS 온라인 동영상 튜토리얼

3. php.cn Dugu Jiujian (2) - CSS 동영상 튜토리얼

위 내용은 CSS 클립을 사용하여 오디오 재생 링 진행률 표시줄을 구현하는 튜토리얼 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!