您好,登錄后才能下訂單哦!
小編給大家分享一下如何利用前端基礎(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)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。