如何利用前端基礎(chǔ)制作html開關(guān)圖標-創(chuàng)新互聯(lián)

小編給大家分享一下如何利用前端基礎(chǔ)制作html開關(guān)圖標，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)2013年開創(chuàng)至今，先為黃陵等服務(wù)建站，黃陵等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為黃陵企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

我們先來看下效果圖：

如何利用前端基礎(chǔ)制作html開關(guān)圖標

html代碼：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>開關(guān)圖標</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) {
                //調(diào)用后臺
            }
            else {
                //調(diào)用后臺
            }
        }
    </script>

看完了這篇文章，相信你對如何利用前端基礎(chǔ)制作html開關(guān)圖標有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

本文標題：如何利用前端基礎(chǔ)制作html開關(guān)圖標-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://bm7419.com/article40/cdidho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站內(nèi)鏈、微信小程序、網(wǎng)站設(shè)計公司、靜態(tài)網(wǎng)站、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護公司