小編給大家分享一下如何利用前端基礎制作html開關圖標,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
成都創(chuàng)新互聯(lián)2013年開創(chuàng)至今,先為黃陵等服務建站,黃陵等地企業(yè),進行企業(yè)商務咨詢服務。為黃陵企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。我們先來看下效果圖:
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) { //調(diào)用后臺 } else { //調(diào)用后臺 } } </script>
看完了這篇文章,相信你對如何利用前端基礎制作html開關圖標有了一定的了解,想了解更多相關知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
本文標題:如何利用前端基礎制作html開關圖標-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接:http://muchs.cn/article40/cdidho.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供電子商務、網(wǎng)站內(nèi)鏈、微信小程序、網(wǎng)站設計公司、靜態(tài)網(wǎng)站、全網(wǎng)營銷推廣
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容