新增第225个小实例：全屏范围滑块
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
01d0408344
commit
d80797940b
|
|
@ -232,6 +232,7 @@
|
|||
222. HTML5+CSS3+JS小实例：灵动的流边开关切换效果
|
||||
223. HTML5+CSS3+JS小实例：暗紫色Tabbar
|
||||
224. HTML5+CSS3小实例：按钮边框动效
|
||||
225. HTML5+CSS3+JS小实例：全屏范围滑块
|
||||
|
||||
#### 赞赏作者
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,82 @@
|
|||
/* 引入谷歌字体 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Monoton&display=swap");
|
||||
|
||||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* 渐变容器 */
|
||||
.container{
|
||||
/* 满屏 */
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
/* 弹性布局 水平+垂直居中 垂直排列 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
/* 渐变背景 */
|
||||
background: linear-gradient(to right,#ff5c5c,#ffa860,#e3dc44,#57b02a);
|
||||
}
|
||||
/* 黑色背景（遮住渐变背景） */
|
||||
.fill-area{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #333838;
|
||||
/* 绝对定位 */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
/* 内阴影 */
|
||||
box-shadow: inset 3px 3px 5px -1px #111;
|
||||
/* 设置元素不对指针事件做出反应 */
|
||||
pointer-events: none;
|
||||
}
|
||||
/* 滑动数值 */
|
||||
label{
|
||||
font-family: 'Monoton';
|
||||
font-size: 8rem;
|
||||
position: static;
|
||||
z-index: 1;
|
||||
color: #ec7474;
|
||||
margin: -5rem 0 2rem;
|
||||
}
|
||||
label::after{
|
||||
content: '%';
|
||||
}
|
||||
/* 滑动条 */
|
||||
input[type=range]{
|
||||
position: static;
|
||||
z-index: 2;
|
||||
width: 50vw;
|
||||
height: 1rem;
|
||||
background: rgba(88,36,36,0.8);
|
||||
/* 去除滑动条的外貌 */
|
||||
appearance: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 0.5rem;
|
||||
/* 内阴影 */
|
||||
box-shadow: inset 3px 3px 5px -1px #000;
|
||||
}
|
||||
/* 滑块 */
|
||||
input[type=range]::-webkit-slider-thumb{
|
||||
width: 4vw;
|
||||
height: 4vw;
|
||||
background: #eee;
|
||||
/* 去除滑块的外貌 */
|
||||
appearance: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
box-shadow: 5px 5px 8px -1px #000;
|
||||
/* 阴影过渡效果 */
|
||||
transition: box-shadow 0.3s ease-in-out;
|
||||
}
|
||||
/* 滑动条悬停时滑块的样式变化 */
|
||||
input[type=range]:hover::-webkit-slider-thumb{
|
||||
background: #fff;
|
||||
box-shadow: 3px 3px 5px -1px #000;
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>全屏范围滑块</title>
|
||||
<link rel="stylesheet" href="225.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="fill-area"></div>
|
||||
<label for="range" id="range-value">0</label>
|
||||
<input type="range" id="range" name="range" value="0" min="0" max="100" onmousemove="handleMouseMove(this.value)" onchange="handleMouseMove(this.value)" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script src="225.js"></script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
// 要操作的元素
|
||||
const rangeValue=document.querySelector('#range-value');
|
||||
const range=document.querySelector('input[type="range"]');
|
||||
const fillArea=document.querySelector('.fill-area');
|
||||
|
||||
// 滑块滑动函数
|
||||
function handleMouseMove(value){
|
||||
// hue-rotate是CSS中的颜色滤镜，可以设置不同的度数来改变颜色
|
||||
const hueRotate="hue-rotate("+value+"deg)";
|
||||
|
||||
// 设置进度数值
|
||||
rangeValue.textContent=value;
|
||||
// 设置颜色滤镜
|
||||
rangeValue.style.filter=hueRotate;
|
||||
|
||||
// 设置滑动条的颜色滤镜
|
||||
range.style.filter=hueRotate;
|
||||
|
||||
// 显示渐变背景，改变黑色背景的宽度及位置
|
||||
fillArea.style.left=value+'vw';
|
||||
fillArea.style.width=100-value+'vw';
|
||||
fillArea.style.filter=hueRotate;
|
||||
}
|
||||
Loading…
Reference in New Issue