web:add Switch Shader

2021-04-16 19:37:10 +08:00
parent d1cc17c7a0
commit 8486f80b11
7 changed files with 262 additions and 8 deletions
--- a/doric-web/test.html
+++ b/doric-web/test.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta content="telephone=yes" name="format-detection" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="white">
+    <meta name="x5-fullscreen" content="true">
+    <meta name="apple-touch-fullscreen" content="yes">
+    <title>H5开关效果</title>
+    <style>
+        * {margin: 0;padding: 0;}
+        body{background:#f1f1f1;}
+        .swich{width:200px;margin:100px auto;}
+        .swich .box{width:60px;height:30px;background:#ccc;border-radius:20px;transition: all .5s ease;}
+        .swich input{display:none;}
+        .swich .box span{display:inline-block;height:30px;width:30px;border-radius:15px;background:#fff;transform:translateX(0px);transition: all .5s ease;}
+        .swich-on .box{background:forestgreen;transition: all .5s ease;}
+        .swich-on .box span{transform:translateX(30px);transition: all .5s ease;}
+    </style>
+
+</head>
+
+<body>
+    <div class="swich">
+        <input type="checkbox" value="" name=""/>
+        <div class="box">
+            <span></span>
+        </div>
+    </div>
+</body>
+</html>
+<script>
+    (function(select){
+        var box = document.querySelector(select)
+        var checkbox = box.querySelector("input");
+        box.onclick = function(){
+            this.classList.toggle("swich-on");
+            if(checkbox.checked){
+                console.log("已经选中");
+                checkbox.checked = "true";
+            }else{
+                console.log("没有选中");
+                checkbox.checked = "false";
+            }
+        }
+    })(".swich");
+</script>