效果图
渐变进度条效果
<!DOCTYPE html>
<html lang="en" style="background-color: rgba(0,0,0,0);">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
<title>蓝舞者-音乐分享</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
-webkit-tap-highlight-color: transparent;
}
html {
background: #fff;
height: 100%;
/*-webkit-overflow-scrolling: touch;*/
overflow: auto
}
body {
background: #fff;
/* max-width: 640px; */
height: 100%;
-webkit-user-select: none;
/* Chrome all / Safari all /opera15 + */
-moz-user-select: none;
/* Firefox all */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
}
.svgBox svg {
width: 100%;
height: 100%;
}
.pageBox {
min-height: 560px;
}
.audioPageContent {
z-index: 0;
position: absolute;
overflow: hidden;
left: 0;
top: 0;
height: 100%;
width: 100%;
/*padding: 60px 15px 45px;*/
}
.audioPageContent>div {
height: 100%;
width: 100%;
}
.audioPageContent svg {
height: 100%;
width: 100%;
}
@media screen and (max-width: 765px) and (orientation: landscape) {
#audio_wrapper {
width: 250px !important;
height: 250px !important;
position: absolute !important;
top: 0 !important;
left: -75% !important;
}
.audioBox {
width: 200px !important;
height: 200px !important;
width: 55% !important;
left: auto !important;
right: 20px !important;
}
.playbackRateNum {
position: relative;
top: 23px;
}
.audioRate .audioPlayFast {
top: 0 !important;
}
.audioRate .audioPlaySlow {
top: 0 !important;
}
.audioRate .audioRateInfo {
position: absolute;
top: -30px;
left: 50%;
margin-left: -100px;
}
}
.audioBox {
-webkit-overflow-scrolling: touch;
height: 460px;
position: fixed;
left: 0;
right: 0;
top: 20px;
bottom: 0;
margin: auto;
}
.audio-cover {
width: 77.3%;
max-width: 400px;
height: auto;
margin: 0 auto;
position: relative;
}
.svgContent {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.svgBox {
position: relative;
width: 100%;
height: 100%;
}
.svgBox svg {
position: absolute;
top: 0;
left: 0;
}
.circle,
.circle-slow {
display: none;
}
.circleShow {
display: block !important;
}
#mSvg {
z-index: 20
}
#slowSvg {
z-index: 10;
transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
/* IE 9 */
-moz-transform: rotateY(180deg);
/* Firefox */
-webkit-transform: rotateY(180deg);
/* Safari 和 Chrome */
-o-transform: rotateY(180deg);
/* Opera */
}
#bar span {
padding: 5px 10px;
}
.audioRate {
height: 40px;
line-height: 40px;
position: relative;
text-align: center;
}
.audioRate>div {
padding: 5px 10px;
border-radius: 8px;
line-height: 20px;
cursor: pointer;
}
.audioRate .audioPlayFast {
position: absolute;
top: -30px;
right: 15px;
}
.audioRate .audioPlaySlow {
position: absolute;
top: -30px;
left: 15px;
}
.audioRate .audioRateInfo {
position: absolute;
left: 50%;
margin-left: -100px;
display: none;
}
/*音乐各种数量*/
.audioNumBox {
position: relative;
height: 40px;
margin-top: 15px;
}
.audioNumBox>div {
position: absolute;
top: 0;
left: 0;
text-align: center;
}
.audioNumBox .icon-star {
width: 22.5px;
height: 22.5px;
}
.audioNumBox .icon-comment {
width: 24px;
height: 21px;
}
.audioNumBox .icon-huancun {
width: 21px;
height: 21px;
}
.audioNumBox .icon-add {
width: 21px;
height: 20px;
}
.audioNumBox p {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
line-height: 20px;
}
</style>
</head>
<body style="background-color: rgba(0,0,0,0);">
<div class="svgBox">
<svg width="400" height="400" viewBox="0 0 400 400" id="mSvg">
<!--定义logo-->
<pattern id="logoImg" width="100%" height="100%" patternContentUnits="objectBoundingBox">
<image width="1" height="1" xlink:href="../../images/audioPointer.png" />
</pattern>
<!--填充的logo图-->
<circle cx="200" cy="35" r="20" fill="url(#logoImg)" id="logo" transform="rotate(0,200,200)" />
</svg>
<svg width="400" height="400" viewBox="0 0 400 400" id="slowSvg">
<defs>
<linearGradient x1="1" y1="" x2="0" y2="0" id="slow1">
<stop offset="0%" stop-color="#be5e2d"></stop>
<stop offset="100%" stop-color="#c46e62"></stop>
</linearGradient>
<linearGradient x1="1" y1="" x2="0" y2="0" id="slow2">
<stop offset="0%" stop-color="#c46e62"></stop>
<stop offset="100%" stop-color="#cb7e57"></stop>
</linearGradient>
<linearGradient x1="1" y1="" x2="0" y2="0" id="slow3">
<stop offset="0%" stop-color="#cb7e57"></stop>
<stop offset="100%" stop-color="#D18e6c"></stop>
</linearGradient>
<linearGradient x1="1" y1="0" x2="0" y2="0" id="slow4">
<stop offset="0%" stop-color="#D18e6c"></stop>
<stop offset="100%" stop-color="#d89e81"></stop>
</linearGradient>
<linearGradient x1="1" y1="" x2="0" y2="0" id="slow5">
<stop offset="0%" stop-color="#d89e81"></stop>
<stop offset="100%" stop-color="#deae96"></stop>
</linearGradient>
<linearGradient x1="1" y1="0" x2="0" y2="0" id="slow6">
<stop offset="0%" stop-color="#deae96"></stop>
<stop offset="100%" stop-color="#e5bfab"></stop>
</linearGradient>
<linearGradient x1="1" y1="" x2="0" y2="0" id="slow7">
<stop offset="0%" stop-color="#e5bfab"></stop>
<stop offset="100%" stop-color="#ebcec0"></stop>
</linearGradient>
<linearGradient x1="1" y1="0" x2="0" y2="0" id="slow8">
<stop offset="0%" stop-color="#ebcec0"></stop>
<stop offset="100%" stop-color="#f2dfd5"></stop>
</linearGradient>
<linearGradient x1="1" y1="" x2="0" y2="0" id="slow9">
<stop offset="0%" stop-color="#f2dfd5"></stop>
<stop offset="100%" stop-color="#F8E5EA"></stop>
</linearGradient>
<linearGradient x1="1" y1="0" x2="0" y2="0" id="slow10">
<!--右->左-->
<stop offset="0%" stop-color="#F8E5EA"></stop>
<stop offset="100%" stop-color="#fff"></stop>
</linearGradient>
</defs>
<!--第一圈-->
<circle cx="200" cy="200" r="165" stroke-width="8" stroke="url('#slow1')" fill="none" stroke-dasharray="0 1000" stroke-linecap='round' transform="rotate(-90, 200 200)" class="circle-slow"></circle>
<!--右边圆-->
<circle cx="200" cy="200" r="165" stroke-width="8" stroke="url('#slow2')" fill="none" stroke-dasharray="0 1000 " stroke-linecap='round' transform="rotate(90, 200 200)" class="circle-slow"></circle>
<!--左边圆-->
<!--第二圈-->
<circle cx="200" cy="200" r="165" stroke-width="8" stroke="url('#slow3')" fill="none" stroke-dasharray="0 1000" stroke-linecap='round' transform="rotate(-90, 200 200)" class="circle-slow"></circle>
<!--右边圆-->
<circle cx="200" cy="200" r="165" stroke-width="8" stroke="url('#slow4')" fill="none" stroke-dasharray="0 1000 " stroke-linecap='round' transform="rotate(90, 200 200)" class="circle-slow"></circle>
<!--左边圆-->
<!--第三圈-->
<circle cx="200" cy="200" r="165" stroke-width="8" stroke="url('#slow5')" fill="none" stroke-dasharray="0 1000" stroke-linecap='round' transform="rotate(-90, 200 200)" class="circle-slow"></circle>
<!--右边圆-->
<circle cx="200" cy="200" r="165" stroke-width="8" stroke="url('#slow6')" fill="none" stroke-dasharray="0 1000 " stroke-linecap='round' transform="rotate(90, 200 200)" class="circle-slow"></circle>
<!--左边圆-->
<!--第四圈-->
<circle cx="200" cy="200" r="165" stroke-width="8" stroke="url('#slow7')" fill="none" stroke-dasharray="0 1000" stroke-linecap='round' transform="rotate(-90, 200 200)" class="circle-slow"></circle>
<!--右边圆-->
<circle cx="200" cy="200" r="165" stroke-width="8" stroke="url('#slow8')" fill="none" stroke-dasharray="0 1000 " stroke-linecap='round' transform="rotate(90, 200 200)" class="circle-slow"></circle>
<!--左边圆-->
<!--第五圈-->
<circle cx="200" cy="200" r="165" stroke-width="8" stroke="url('#slow9')" fill="none" stroke-dasharray="0 1000" stroke-linecap='round' transform="rotate(-90, 200 200)" class="circle-slow"></circle>
<!--右边圆-->
<circle cx="200" cy="200" r="165" stroke-width="8" stroke="url('#slow10')" fill="none" stroke-dasharray="0 1000 " stroke-linecap='round' transform="rotate(90, 200 200)" class="circle-slow"></circle>
<!--左边圆-->
</svg>
<svg width="400" height="400" viewBox="0 0 400 400" id="svg">
<defs>
<linearGradient x1="1" y1="0" x2="0" y2="0" id="fast1">
<!--右->左-->
<stop offset="0%" stop-color="#2dbebe"></stop>
<stop offset="100%" stop-color="#42C4C4"></stop>
</linearGradient>
<linearGradient x1="1" y1="" x2="0" y2="0" id="fast2">
<stop offset="0%" stop-color="#42C4C4"></stop>
<stop offset="100%" stop-color="#57CBCB"></stop>
</linearGradient>
<linearGradient x1="1" y1="0" x2="0" y2="0" id="fast3">
<stop offset="0%" stop-color="#57CBCB"></stop>
<stop offset="100%" stop-color="#6CD1D1"></stop>
</linearGradient>
<linearGradient x1="1" y1="" x2="0" y2="0" id="fast4">
<stop offset="0%" stop-color="#6CD1D1"></stop>
<stop offset="100%" stop-color="#81d8d8"></stop>
</linearGradient>
<linearGradient x1="1" y1="0" x2="0" y2="0" id="fast5">
<stop offset="0%" stop-color="#81d8d8"></stop>
<stop offset="100%" stop-color="#96DEDE"></stop>
</linearGradient>
<linearGradient x1="1" y1="" x2="0" y2="0" id="fast6">
<stop offset="0%" stop-color="#96DEDE"></stop>
<stop offset="100%" stop-color="#ABE5E5"></stop>
</linearGradient>
<linearGradient x1="1" y1="0" x2="0" y2="0" id="fast7">
<stop offset="0%" stop-color="#ABE5E5"></stop>
<stop offset="100%" stop-color="#C0EBEB"></stop>
</linearGradient>
<linearGradient x1="1" y1="" x2="0" y2="0" id="fast8">
<stop offset="0%" stop-color="#C0EBEB"></stop>
<stop offset="100%" stop-color="#d5f2f2"></stop>
</linearGradient>
<linearGradient x1="1" y1="" x2="0" y2="0" id="fast9">
<stop offset="0%" stop-color="#d5f2f2"></stop>
<stop offset="100%" stop-color="#EAF8F8"></stop>
</linearGradient>
<linearGradient x1="1" y1="" x2="0" y2="0" id="fast10">
<stop offset="0%" stop-color="#EAF8F8"></stop>
<stop offset="100%" stop-color="#fff"></stop>
</linearGradient>
</defs>
<!--底圆-->
<circle cx="200" cy="200" r="165" stroke-width="8" stroke="#3F3E44" fill="none" stroke-dasharray="1069 1069" stroke-linecap='round'></circle>
<!--第一圈-->
<circle cx="200" cy="200" r="165" stroke-width="8" stroke="url('#fast1')" fill="none" stroke-dasharray="0 1000" stroke-linecap='round' transform="rotate(-90, 200 200)" class="circle"></circle>
<!--右边圆-->
<circle cx="200" cy="200" r="165" stroke-width="8" stroke="url('#fast2')" fill="none" stroke-dasharray="0 1000 " stroke-linecap='round' transform="rotate(90, 200 200)" class="circle"></circle>
<!--左边圆-->
<!--第二圈-->
<circle cx="200" cy="200" r="165" stroke-width="8" stroke="url('#fast3')" fill="none" stroke-dasharray="0 1000" stroke-linecap='round' transform="rotate(-90, 200 200)" class="circle"></circle>
<!--右边圆-->
<circle cx="200" cy="200" r="165" stroke-width="8" stroke="url('#fast4')" fill="none" stroke-dasharray="0 1000 " stroke-linecap='round' transform="rotate(90, 200 200)" class="circle"></circle>
<!--左边圆-->
<!--第三圈-->
<circle cx="200" cy="200" r="165" stroke-width="8" stroke="url('#fast5')" fill="none" stroke-dasharray="0 1000" stroke-linecap='round' transform="rotate(-90, 200 200)" class="circle"></circle>
<!--右边圆-->
<circle cx="200" cy="200" r="165" stroke-width="8" stroke="url('#fast6')" fill="none" stroke-dasharray="0 1000 " stroke-linecap='round' transform="rotate(90, 200 200)" class="circle"></circle>
<!--左边圆-->
<!--第四圈-->
<circle cx="200" cy="200" r="165" stroke-width="8" stroke="url('#fast7')" fill="none" stroke-dasharray="0 1000" stroke-linecap='round' transform="rotate(-90, 200 200)" class="circle"></circle>
<!--右边圆-->
<circle cx="200" cy="200" r="165" stroke-width="8" stroke="url('#fast8')" fill="none" stroke-dasharray="0 1000 " stroke-linecap='round' transform="rotate(90, 200 200)" class="circle"></circle>
<!--左边圆-->
<!--第五圈-->
<circle cx="200" cy="200" r="165" stroke-width="8" stroke="url('#fast9')" fill="none" stroke-dasharray="0 1000" stroke-linecap='round' transform="rotate(-90, 200 200)" class="circle"></circle>
<!--右边圆-->
<circle cx="200" cy="200" r="165" stroke-width="8" stroke="url('#fast10')" fill="none" stroke-dasharray="0 1000 " stroke-linecap='round' transform="rotate(90, 200 200)" class="circle"></circle>
<!--左边圆-->
</svg>
</div>
</body>
<script src="../../libs/jquery-2.2.1.js"></script>
<script>
var degreeSum = 5 * 360, //总角度
degreeNow = 0, //当前角度
degreeNowShow = 0, //当前显示角度
showCircle = 0, //当前显示半圆圈数的下标，默认显示第一个圈
circleR = 165, //圆圈半径
$svgBoxX = 0,
$svgBoxY = 0,
playbackRateNum = 100,
rad = 0, //当前角度
radOld = 0, //历史角度
radNum = 0, //整圈数
radAdd = 360, //按钮触发变速梯度
isLong = false, //是否到顶端
moveMark = false; //是否能调速
$circle = $(".circle"); //加速圈集合
$circleSlow = $(".circle-slow"); //减速圈集合
$logo = $("#logo"); //调速点
$svgBox = $(".svgBox");
$reset = $(".reset");
$playbackRateNum = $(".playbackRateNum");
setInterval(function() {
//调速中心点坐标
$svgBoxX = $svgBox.width() / 2;
$svgBoxY = $svgBox.height() / 2;
}, 500)
console.log($svgBoxX, $svgBoxY)
$logo.on("touchstart", function(e) {
moveMark = true;
});
$svgBox.on("touchmove", function(e) {
if(moveMark) {
e.preventDefault();
x = e.originalEvent.changedTouches[0].clientX,
y = e.originalEvent.changedTouches[0].clientY;
radOld = rad;
changePosition(x, y)
}
});
$svgBox.on("touchend", function(e) {
moveMark = false;
});
$logo.on("mousedown", function(e) {
moveMark = true;
});
$svgBox.on("mousemove", function(e) {
// $('body').trigger('mouseenter');
if(moveMark) {
e = event || window.event;
e.preventDefault();
x = e.clientX,
y = e.clientY;
radOld = rad;
changePosition(x, y)
}
})
$svgBox.on("mouseup", function(e) {
moveMark = false;
});
$reset.on("click", function() {
degreeNow = 0;
getCircleShow(degreeNow)
})
function changePosition(x, y) {
radOld = rad;
relativeX = x - $svgBoxX;
relativeY = $svgBoxY - y;
rad = 180 / Math.PI * Math.atan2(relativeY, relativeX);
rad = rad > 90 && rad < 180 ? 90 - rad + 360 : 90 - rad; //左上 90<rad<180
if((radOld <= 360 && radOld >= 270) && (rad >= 0 && rad <= 180)) { //加圈
radNum++
} else if((rad <= 360 && rad >= 270) && (radOld >= 0 && radOld <= 90)) { //减圈
radNum--
}
if(radNum < -5 || radNum > 4) {
moveMark = false;
}
if(Math.abs(rad + (radNum) * 360) < degreeSum) {
degreeNow = rad + radNum * 360;
getCircleShow(degreeNow)
}
}
//修改变速圈的显示
function getCircleShow(degree) {
if(degree >= 0) { //加速情况下，logo度数与背景圈度数相同
rad = degree % 360
radNum = parseInt(degree / 360)
} else { //减速情况下，logo度数与背景圈度数互补，因为背景镜像显示的
rad = 360 + degree % 360;
radNum = parseInt(degree / 360) - 1
}
showCircle = Math.floor(Math.abs(degree) / 180); //显示的半圈数
degreeNowShow = Math.abs(degree) % 180; //显示的半圈角度
playbackRateNum = (degree / 360 / 5 * 0.5).toFixed(2) * 100 + 100;
//$("#audio")[0].playbackRate=(playbackRateNum/100).toFixed(2);//当前音乐倍速 0.5-1.5
$logo.attr("transform", "rotate(" + rad + ",200,200)");
//$playbackRateNum.html(playbackRateNum+"%");
if(radNum < 0) {
$circle.removeClass("circleShow"); //把加速圈全部隐藏
for(var i = 0; i < $circleSlow.length; i++) { //把当前操作半圈更外面的圈隐藏
if(i < showCircle) {
$circleSlow.eq(i).addClass("circleShow");
$circleSlow.eq(i).attr("stroke-dasharray", "" + Math.PI * circleR + ",10000");
} else if(i == showCircle) {
$circleSlow.eq(i).addClass("circleShow");
$circleSlow.eq(i).attr("stroke-dasharray", "" + degreeNowShow / 360 * 2 * Math.PI * circleR + ",10000");
} else {
$circleSlow.eq(i).removeClass("circleShow");
}
}
} else {
$circleSlow.removeClass("circleShow");
for(var i = 0; i < $circle.length; i++) {
if(i < showCircle) {
$circle.eq(i).addClass("circleShow");
$circle.eq(i).attr("stroke-dasharray", "" + Math.PI * circleR + ",10000");
} else if(i == showCircle) {
$circle.eq(i).addClass("circleShow");
$circle.eq(i).attr("stroke-dasharray", "" + degreeNowShow / 360 * 2 * Math.PI * circleR + ",10000");
} else {
$circle.eq(i).removeClass("circleShow");
}
}
}
}
function getPlaybackRateNum(playbackRate) {
JSInterface.playbackRateNum();
}
function setPlaybackRateNum(playbackRateNum) {
degree = (playbackRateNum - 100) * 36;
getCircleShow(degree)
}
</script>
</html>
网友评论