新增第159个小实例：翻滚吧乔巴自定义滑块控件

2022-06-01 17:00:45 +08:00 · 2022-06-01 17:00:45 +08:00 · f55bf5411f
parent aa450ce647
commit f55bf5411f
5 changed files with 115 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -165,4 +165,5 @@
 155. HTML5+CSS3+JS小实例：背景动态变化的登录界面2.0
 156. HTML5+CSS3小实例：纯CSS实现带进度条的人物卡片切换效果
 157. HTML5+CSS3小实例：小球爬楼梯loading加载动画
-158. HTML5+CSS3+JS小实例：快捷菜单图标按钮交互特效
+158. HTML5+CSS3+JS小实例：快捷菜单图标按钮交互特效
+159. HTML5+CSS3+JS小实例：翻滚吧乔巴自定义滑块控件
--- a/code/159/159.css
+++ b/code/159/159.css
@ -0,0 +1,79 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    height: 100vh;
+    /* 弹性布局 水平+垂直居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* 渐变背景 */
+    background: linear-gradient(to top,#a1c4fd,#c2e9fb);
+    /* 自定义属性(乔巴的翻滚角度),可通过var函数对其调用 */
+    --thumb-rotate: 0deg;
+}
+.slider-bar{
+    display: flex;
+    align-items: center;
+}
+#slider{
+    width: 90vw;
+    max-width: 500px;
+    /* 去除滑块控件的外貌 */
+    appearance: none;
+    -webkit-appearance: none;
+    /* 去除背景 */
+    background: none;
+    /* 去除轮廓线 */
+    outline: none;
+}
+/* 自定义滑块凹槽的样式 */
+#slider::-webkit-slider-runnable-track{
+    appearance: none;
+    -webkit-appearance: none;
+    width: 100%;
+    height: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+    cursor: pointer;
+}
+/* 自定义滑块的样式 */
+#slider::-webkit-slider-thumb{
+    appearance: none;
+    -webkit-appearance: none;
+    width: 50px;
+    height: 50px;
+    /* 设置背景图片 不平铺 */
+    background: url('/images/159/qiaoba.png') no-repeat;
+    /* 对图片进行剪切,保留原始比例 */
+    background-size: cover;
+    /* 设置图片定位 */
+    background-position: 0 0;
+    /* 默认放大1.9倍 */
+    /* 通过var函数获取自定义属性--thumb-rotate,设置要旋转的角度 */
+    transform: scale(1.9) rotate(var(--thumb-rotate));
+    margin-top: -18px;
+}
+/* 自定义滑块的活动态样式 */
+#slider::-webkit-slider-thumb:active{
+    /* 改变背景图片定位 */
+    background-position: 100% 0;
+    /* 放大2倍,设置旋转角度 */
+    transform: scale(2) rotate(var(--thumb-rotate));
+}
+.slider-bar span{
+    width: 50px;
+    height: 50px;
+    background-color: #fff;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 15px;
+    box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+    font-size: 20px;
+    font-weight: 600;
+    color: #5282cb;
+}
--- a/code/159/159.html
+++ b/code/159/159.html
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+
+    <title>翻滚吧乔巴自定义滑块控件</title>
+    <link rel="stylesheet" href="159.css">
+</head>
+
+<body>
+    <div class="slider-bar">
+        <input type="range" id="slider" value="0">
+        <span>0</span>
+    </div>
+</body>
+
+</html>
+
+<script src="159.js"></script>
--- a/code/159/159.js
+++ b/code/159/159.js
@ -0,0 +1,13 @@
+// 要操作的元素
+const slider=document.getElementById('slider');
+const span=document.querySelector('.slider-bar span');
+
+// 绑定滑块控件的input事件
+slider.addEventListener('input',function(){
+    // 获取滑动的值并赋值显示
+    span.innerText=slider.value;
+    // 结合滑动的值，计算乔巴翻滚的角度，并赋值给自定义属性--thumb-rotate
+    // 除以100：是将滑动的值转为小数
+    // 乘以720：这里的720表示翻滚2周
+    slider.style.setProperty('--thumb-rotate',(slider.value/100*720)+'deg');
+})
--- a/images/159/qiaoba.png
+++ b/images/159/qiaoba.png