网站建设基础:快速制作一个HTML开关图标

  • 2020-11-18
  • 213

律师网站设计中,有时候会用到网页开关设计,我们先来看下效果图:

html代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>开关图标</title>
</head>
<body>
    <div>
        <div>
            <input type="checkbox" id="toggle-button" name="switch" οnclick="SwitchClick()" checked>
            <label for="toggle-button">
                <span></span>
                <span class="text on">ON</span>
                <span class="text off">OFF</span>
            </label>
        </div>
    </div>
</body>
</html>

css样式:

<style type="text/css">
        body {
            text-align: center
        }
        .SwitchIcon {
            margin: 200px auto;
        }
        #toggle-button {
            display: none;
        }
        .button-label {
            position: relative;
            display: inline-block;
            width: 80px;
            height: 30px;
            background-color: #ccc;
            box-shadow: #ccc 0px 0px 0px 2px;
            border-radius: 30px;
            overflow: hidden;
        }
        .circle {
            position: absolute;
            top: 0;
            left: 0;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #fff;
        }
        .button-label .text {
            line-height: 30px;
            font-size: 18px;
            text-shadow: 0 0 2px #ddd;
        }
        .on {
            color: #fff;
            display: none;
            text-indent: -45px;
        }
        .off {
            color: #fff;
            display: inline-block;
            text-indent: 34px;
        }
        .button-label .circle {
            left: 0;
            transition: all 0.3s;
        }
        #toggle-button:checked + label.button-label .circle {
            left: 50px;
        }
        #toggle-button:checked + label.button-label .on {
            display: inline-block;
        }
        #toggle-button:checked + label.button-label .off {
            display: none;
        }
        #toggle-button:checked + label.button-label {
            background-color: #19e236;
        }
        .div {
            height: 20px;
            width: 30px;
            background: #51ccee;
        }
    </style>

js逻辑:

<script type="text/javascript">
        //窗体加载
        window.onload = function () {
            var onoffswitch = document.getElementById("toggle-button");
            onoffswitch.checked = true;
        }
        //测试开始
        function SwitchClick() {
            var onoffswitch = document.getElementById("toggle-button");
            var label = document.getElementById("batteryIconContent");
            if (onoffswitch.checked) {
                //调用后台
            }
            else {
                //调用后台
            }
        }
    </script>

相关阅读

网站建设中HTML<img>标签的srcset属性

我掏空了各大搜索引擎,整理了HTML图片标签笔记,满满干货

律师网站设计基础:HTML标签区别

律师网站设计中给HTML页面的文字或者字符设置间距

5个2018年最好的免费响应式HTML5网页模板,快速打造律师网站

成都律品科技有限公司专注律师互联网营销技术服务,创始人员2009年开始从事律师行业互联网技术开发、营销运营工作已十年,2018年公司正式成立,不断探索律师行业服务需求,致力于为律师行业提供透明、优质的服务,现已为全国多家律师事务所、律师团队提供互联网技术及营销支持。

在线咨询
  • 152-0832-9147

  • 105991110

全时在线,如未回复请留下联系方式

微信咨询